Auto Load Vuejs Components in Nuxt

Auto Load Vuejs Components in Nuxt

With Nuxt components you can auto import your components really easily and even comes with support for dynamic imports otherwise known as lazy loading.

With Nuxt components you can auto import your components really easily and even comes with support for dynamic imports otherwise known as lazy loading. That means you can just add your component in the template without having to add it to the script tag. This makes development much faster.

How does it work?

This module parses your template and automatically includes the component in the file where you are using it such as a page, layout or even a component. Because Nuxt.js uses automatic code splitting to split your pages by default this module works perfect as it will only contain the components that are used on that page. Also, if you use a component in more than 2 pages, Nuxt.js will automatically create a shared chunk for them thanks to the magic of webpack.

Installation

If you are using Nuxt v2.13+ then this module is included by default but it is not activated by default so you don't have to install it but you do have to set components to true in your nuxt config file.

export default {
  components: true
}

OR

If you are using Nuxt 2.10+ then you will need to install the module.

yarn add --dev @nuxt/components # or npm install --save-dev @nuxt/components

Then you need to add the @nuxt/components to your buildModules section of your nuxt.config.js file.

export default {
  buildModules: [
    '@nuxt/components'
  ]
}

Auto Import your components

Once you have the module activated or installed you can now simply add your components in your template. The module will read the components directory and automatically look for the component in there.

  1. Create your components
components/
  TheHeader.vue
  TheFooter.vue
  1. Use your components in any .vue file (components, pages or layouts) without having to add a script tag or an import.
<template>
  <TheHeader /> <!-- or <the-header /> -->
  <TheFooter /> <!--  or <the-footer /> -->
</template>

vuejs javascript vue vue-js nuxtjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Responsive ecommerce template built with Vue.js and Nuxt.js

Responsive ecommerce template built with Vue.js and Nuxt.js

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.