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!

score 17 · Answer 1 · edited Aug 30 '22 at 12:03

17

In Quasar 2:

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

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

edited Aug 30 '22 at 12:03

David Wolf

1,400
1
9
18

answered Aug 17 '21 at 12:54

fromani

181
1
3

score 13 · Accepted Answer · answered Sep 16 '20 at 06:52

13

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

answered Sep 16 '20 at 06:52

Dvdgld

1,984
2
15
41

This works. I had to do `export default ({ app }) => { app.component('my-component', MyComponent)}` in the boot file to make it work – A.W. Aug 11 '21 at 12:40
how do you do this using quasar CDN – JCm Jul 01 '22 at 08:02

score 3 · Answer 3 · answered Feb 17 '22 at 06:37

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)

How do I register component globally in Quasar?

3 Answers3