Point to Note Before and During Vue/Nuxt Implementation

Points to Note When Requesting Coding for Mockups

In this section, we will cover the following points:

• Coding with Nuxt
• Version control of source code
• Use of external tools
• About jQuery
• Performance considerations
• Responsive design considerations

Coding with Nuxt

If possible, utilize the Markup of the Nuxt mockup. We recommend that you prioritize the modularization of your code.

※Example of modularization

• Pagination
• Article list
• List card UI

Version Control of Source Code

• Use Git for version control of the source code. For environments that utilize Git, we recommend services like GitHub or the Git feature in Backlog.
• If the mockup is updated for each phase of the project, it would be best to tag or branch each of the phase.
• If you incorporate the CSS of the latest mockup into the production environment, unexpected styles may be applied.

Use of External Tools

Modularize JS and CSS (Sass/Scss) by features using tools such as webpack or gulp, and ultimately, combine them into one file.

About jQuery

Avoid using jQuery. Although it is possible to incorporate jQuery into Nuxt, it could potentially affect the Nuxt side of the implementation due to the jQuery of the mockup, leading to decreased site performance or increased resources. We recommend implementation primarily in JavaScript.

Performance Considerations

If you are using web fonts, please ensure they can also accommodate slow network environments. For instance, support display: swap and, if possible, replace text that applies web fonts with SVG.

Although there is no particular issue when using Google fonts in a local environment or mockup environment, when viewed in an environment where the files are actually deployed, the loading of the page might be slow, or the display of text might be choppy due to reasons such as slow loading of font files.

Responsive Design Considerations

• For HTML elements with different designs for PC/SP, handle them with a single source as much as possible.
• When switching between PC/SP in response to responsiveness, switch between PC/SP within the CSS file using media queries, rather than preparing and loading separate CSS files for PC and SP.

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.