Point to Note During Vue/Nuxt Implementation

Points to Note When Incorporating Mockups into Nuxt

In this section, we will cover the following points:

• Examples of using Nuxt Router
• Transition of dynamic components (galleries, sliders, modals, etc.)
• Code reuse
• How to exchange data between components

Examples of Using Nuxt Router

Nuxt's default routing system supports basic cases, such as:

• Static pages (/about)
• Detail pages by ID (/item/:id)
• Subpages (/parent/child)

However, for more complex cases, custom routers may be required.

For instance, suppose your application requires the following structure:

/
/rent
/rent/appartment/
/rent/appartment/:city
/rent/house/
/rent/house/:city
/rent/investment/
/rent/investment/:city
/buy
/buy/:type/:city
/buy/:type/help

In such cases, if you stick with Nuxt's default router, you would have to create the same page 14 times. To avoid this, it's good to follow these steps:

1. Create a page component like /pages/rentbuy/index.vue.
2. Add extendRoutes rules in the nuxt.config.js.

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push(
        {
          name: 'rent-buy-page',
          path: '/:operation(rent|buy)/:type?/:city?',
          component: resolve(__dirname, '/pages/rentbuy/index.vue'),
        },
      )
    }
  }
}

In the page component, process the operation, type, city parameters from router/component props.

However, an important point to note in this case is that when making the path dynamic, the number of pages generated by SSG may increase, potentially leading to an increase in build time and deployment file size. Therefore, depending on the situation, consider using request parameters to dynamically change the contents of the content with CSR (Client Side Rendering).

info

• Extending the Nuxt router, filesystem routing
• Vue Router

Transition of Dynamic Components from Mockups (Galleries, Sliders, Modals, etc.)

When transitioning dynamic components (galleries, sliders, modals, etc.), follow these principles:

• Encapsulate.
• Avoid using global scripts.
• Place all logic inside the component.
• Avoid JS/JQuery-style DOM operations. Use Vue's class/style management tool.

Code Reuse

In a Vue application, you can reuse logic using mixins, plugins, filters, etc. If there are multiple components using the same logic, move it into a mixin to avoid code duplication.

info

Mixins - Vue.js

Data Exchange between Components

For exchanging data between components, Vue offers various methods, including passing props from parent to child, sending data from child to parent using an event emitter, and using Vuex. Direct manipulation of the DOM/style outside of the component should be avoided.