Auto import components in NuxtJS


Auto import all your components within NuxtJS which makes code much cleaner & less hastle

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!


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:


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

  <ComponentFoo />
  <component-bar />

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 :

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

export default {
  data () {
    return {
      foo: null
  methods: {
    async loadFoo () { = await this.$axios.$get('foo')

Nested Components

If you have components in nested directories:


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 />:


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' }]


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'] }],

As a developer, I always see the problem for creating images/banners whenever I post some content online.

Even for simple designs I always needed to open figma or search online, so I thought of automating it.

I've build BannerPot to solve this problem, would you like to give it a try?

Ramesh from BannerPot

Ramesh Mhetre

Maker of BannerPot