4 Ways to import components in Nuxt

After confussions, debates about whats best, trial and error, I've created a simple overview of how to import your components in Vue (Nuxt). Some ways are better then others, but it also completely depends on the purpose and where to use it.

These methods can be used in other Vue projects just as simple, besides the plugin one which would need a little different approach.

The Classic Way

In your vue component:

import nameOfComponent from '~/components/nameOfComponent.vue';

export default{
    components: {
        nameOfComponent
    }
}

Pros

The component loads directly and will be directly visible. Also, the renderer will always render the component.

Cons

All components will be loaded directly, sometimes this means that components will be loaded and rendered while they are used (yet). This adds up to build and load time.

Usage

Components which are you main components, like navigation or things you for sure want to see on first load.

The Async Way

In your vue component:

const nameOfComponent = () => import('~/components/nameOfComponent.vue');

export default{
    components: {
        nameOfComponent
    }
}

Pros

The component loads asynchronous, which means that the component won't be taken part in the load time and will only be loaded when actually necessary.

Cons

Not much, but it means that the component could be loaded a little later than load time, especially with heavy components. Using this method on components which should be loaded directly could make them to pop in. Which is something you don't want.

Usage

When you have components which are below the fold, components which don't have to be loaded directly to be able to use the website. Load these components asynchronous ("lazy") and the apps load time will get a lot shorter. When lazyloading the components, the website can jump, so avoid using this method for components which should be present directly.

The Plugin Way

In your vue component:

export default{

}

Create a plugin js file (ex. plugins/components.js)


import Vue from 'vue';
import nameOfComponent from '~/components/nameOfComponent.vue';

const Components = {
    nameOfComponent
};

Object.keys(Components).forEach((key) => {
    Vue.component(key, Components[key]);
});

In nuxt.config.js

plugins: [{  src: "~/plugins/components.js", ssr: true }]

Pros

The component will be loaded everywhere without having to declare it in the components. This means you can easily use it anywhere.

Cons

The component will be loaded everywhere, which means that all pages will be loading this component even when they don't use it. This increases the load time a lot.

Usage

When there are components which for sure will be used almost all through your app or website, like components for layout, grid, or buttons. These components you don't want to include everywhere and just be able to use everywhere. But be careful! Try to avoid this method as much as possible.

The Direct Way

In your vue component:

export default{
    components: {
        nameOfComponent: () => import('~/components/nameOfComponent.vue');
    }
}

Pros

Easy syntax and easier to comment out. In a way it's the same as the "async" way but written shorter.

Cons

Not much, but it means that the component could be loaded a little later than load time, especially with heavy components. Using this method on components which should be loaded directly could make them to pop in. Which is something you don't want.

Usage

While debugging components, and you want to just turn off 1 component easily, this makes it for sure easier to comment out a component directly. Just the syntax alone, make it shorter to read and clearer.

Conclusion

Every way has its pros and cons, some are better for performance, some for usability. In the end, it's best to judge every import by what way would be best to use.

  • Import single components which should be loaded directly: 'The Classic Way'
  • Import components which can be loaded later: 'The Async/Direct Way'
  • Import component which will be used a lot through the app: 'The Plugin Way'

Do you care a lot about performance? Don't use the plugin way, but are you just prototyping and want to fix something fast. Just use it for all components.