Automatically import BaseComponents in a Quasar project

published at 2019/11/21

Vue Quasar

A project written in Vuejs, especially the large ones, has lots of base components, like BaseButton, BaseInput, BaseTitle, etc... Those components are often used. And I have always found it tedious to import them whenenever I need them in a vue file. So, recently, in my Quasar project, I create a boot file to globally register them without needing to import them anymore. Let me show how I did it.


This post is largely inspired by the second pattern taught by Chris Fritz in a vue conference. Please show this video if you want to learn more. I adapted the code to my needs but the basic idea comes from this conference.

Consider you have a working Quasar project, and a tree directory which looks like mine:

base components

Notice I have some base components, always named in the same manner: BaseSomething.vue.

Whenever I need those components in a vue file, I need to import them, register them in it. And I need to repeat this process in every component. It's particularly tedious because those components are used almost in every "higher components".

Let's import base components automatically by creating a boot file:

quasar new boot baseComponentRegistration
// src/boot/baseComponentRegistration.js
const requireComponent = require.context('components', false, /Base[\w]+\.vue$/) // require the base components in the components directory.

export default async ({ Vue }) => {
  requireComponent.keys().forEach(fileName => {
    const componentConfig = requireComponent(fileName)
    const componentName = fileName.replace(/^\.\//, '').replace(/\.vue/, '')

    Vue.component(componentName, componentConfig.default || componentConfig) // register globally the base components in the Vue instance
  })
}

Then register this boot file in your Quasar config file:

// quasar.conf.js
module.exports = function (ctx) {
  return {
    boot: [
      'baseComponentRegistration',

      // ...

    ],

    // ...

  }
}


And that's all. Now you can use your base components without worrying about importing them in your vue file