How do I register component globally in Quasar?

Question

I have a component which I'll be using in every page of my web-app. To simplify my work how do I register this component globally? I used nuxt once and it was so easy by npm @nuxtjs/global-components. What is process with Quasar? Thank you!

Answer 1

You can create a boot file with all your global components, e.g. global-components.js

There you need to import your components and apply them to Vue:

import Vue from 'vue'
import MyComponent from '../component/MyComponent.vue'

Vue.component('my-component', MyComponent)

Lastly you need to call your boot file in quasar.conf.js

boot: ["global-components"]

More info

Answer 2

In Quasar 2:

import { boot } from 'quasar/wrappers'
import MyComponent from '../components/MyComponent.vue'

export default boot(async ({ app }) => {
  app.component('my-component', MyComponent)
})

Answer 3

I use this solution and it helps us to dynamically register component

Create a file in src/boot folder for example i created register-my-component.js and white this code:

// src/boot/register-my-component.js
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";

export default ({ app }) => {
  const requireComponent = require.context(
    "src/components",
    true,
    /[A-Z-_]\w+\.(vue)$/
  );

  requireComponent.keys().forEach((fileName) => {
    const componentConfig = requireComponent(fileName);
    const componentName = upperFirst(
      camelCase(
        fileName
          .split("/")
          .pop()
          .replace(/\.\w+$/, "")
      )
    );
    app.component(componentName, componentConfig.default || componentConfig);
  });
};

Now register this boot file in quasar.conf.js. you can find it in the root directory

// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/boot-files
boot: [ ..., "register-my-component" ],

Now you don't need to import and register components anymore (NOTE: as you can see only components in src/component register automatically. So if you write your component in other paths you need to import and register that)