What is the best practice for loading components so they are globally accessible?

[akselsoft]

Hi

I want to have a list of components that may be re-used throughout the application. What is the recommended practice for this?

I was thinking of creating my own boot/plug-in but the examples I’ve seen from the docs (https://forum.quasar-framework.org/topic/3721/how-to-write-a-custom-component-and-use-it/3) suggest using a common name like components.js

import TestDynamic2 from 'components/TestDynamic2.vue'

export default async ({ Vue }) => {
  Vue.component('TestDynamic2', TestDynamic2)
}

Is that the recommended approach or should I look at building its own component boot/plug-in?

[s.molinari]

If you want to import components and have global access to them, then the boot file system is the way to go. You can use any name you’d like for the boot file. You just have to make sure you use the same name when registering it in the quasar.conf.js file.

That referenced file is a good example of a boot file, where components are being globally registered:

https://github.com/quasarframework/quasar/blob/dev/docs/src/boot/components.js

Scott

[akselsoft]

Awesome Scott - thanks!

[btree]

I did this but my component uses the vue-svg-inline-loader. The svg file now does not properly inline. Is there a way to get the webpack config to work for a specific boot file, or another way to globally register components so that this is not an issue?

[s.molinari]

What is the component you are trying to install?

Scott

[btree]

@s-molinari I made a wrapper component for icons. This is the core of the code:

<template>
  <img
    svg-inline
    :src="`../statics/feather/${name}.svg`"
  />
</template>

<script>
export default {
  name: "Icon",
  props: {
    name: String
  }
};
</script>

[s.molinari]

How did you get the loader to work? Did you see the specific Quasar quasar.conf.js config you need to set in the install instructions?

Scott

[btree]

Nevermind, the package did not support dynamic paths itself. I used vue-inline-svg instead and everything works perfectly. Thanks!