Auto import components in NuxtJS

Auto import components in NuxtJS

Jun 01, 2020 / Moody Developer

In the last week NuxtJS announced a new way to auto import your components. It is now officially supported with the latest version(2.13+).

You just have to enable it in your nuxt.config.js

export default {
  components: true
}

You can find more details on the official github page. Here is the demo

Long story short with this image:

Supported Features

  • Scan and auto import components
  • Multiple paths with customizable prefixes and lookup/ignore patterns
  • Dynamic import (aka Lazy loading) Support
  • Hot reloading Support
  • Transpiling Support (useful for component libraries' authors)
  • Fully tested!

Usage

Ensure using nuxt 2.13+ and components option is set in nuxt.config:

export default {
  components: true
}

Note: If using nuxt 2.10...2.13, you have to also manually install and add @nuxt/components to buildModules inside nuxt.config.

Create your components:

components/
  ComponentFoo.vue
  ComponentBar.vue

Use them whenever you want, they will be auto imported in .vue files :

<template>
  <ComponentFoo />
  <component-bar />
</template>

No need anymore to manually import them in the script section!

See live demo.

Dynamic Imports

To make a component imported dynamically (lazy loaded), all you need is adding a Lazy prefix in your templates.

If you think this prefix should be customizable, feel free to create a feature request issue!

You are now being able to easily import a component on-demand :

<template>
  <LazyComponentFoo v-if="foo" />
  <button @click="loadFoo">
    Load Foo
  </button>
</template>

<script>
export default {
  data () {
    return {
      foo: null
    }
  },
  methods: {
    async loadFoo () {
      this.foo = await this.$axios.$get('foo')
    }
  }
}
</script>

Nested Components

If you have components in nested directories:

components/
  foo/
    Bar.vue

The component name will be based on its filename:

<Bar />

We do recommend to use the directory name in the filename for clarity in order to use <FooBar />:

components/
  foo/
    FooBar.vue

If you want to keep the filename as Bar.vue, consider using the prefix option: (See directories section)

components: [
    '~/components/',
    { path: '~/components/foo/', prefix: 'foo' }
]

Directories

By setting components: true, default ~/components directory will be included. However you can customize module behaviour by proividing directories to scan:

export default {
  components: [
    '~/components', // shortcut to { path: '~/components' }
    { path: '~/components/awesome/', prefix: 'awesome' }
  ],
}

Each item can be either string or object. String is shortcut to { path }.

Note: Don't worry about ordering or overlapping directories! Components module will take care of it. Each file will be only matched once with longest path.

f you prefer to split your SFCs into .js.vue and .css, you can only enable .vue files to be scanned:

├── src
│   └── components
│         └── componentC
│           └── componentC.vue
│           └── componentC.js
│           └── componentC.scss


// nuxt.config.js
export default {
  components: [
    { path: '~/components', extensions: ['vue'] }
  ]
}



Similar Articles

Use Chart.js in NuxtJS applications

Use Chart.js in NuxtJS applications

Using chart.js within your NuxtJs(VueJs) application is easy like piece of cake
Read more...
VueJs content loading placeholders

VueJs content loading placeholders

Vue Content Loading is a component to use placeholder or preset.
Read more...