How to import components globally in Nuxt.js

29 Views Asked by At
``<template>
    <div>
      <QBtn>Hola</QBtn>
      <component :is="a"></component>
    </div>
</template>

<script setup lang="ts">
import { components } from "mylib/dist/library"
import { QBtn } from 'quasar';
const a = components.Menu;

</script>
`
`// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
    devtools: { enabled: true },
    css: [
        // ...
        'quasar/fonts',
        'quasar/animations',
        'quasar/icons',
        'quasar/css',
        //'@/assets/custom.scss'], //capa de personalizacion propia
        'quasar/brand', // If config.brand is used
        // ...  
    ],
    buildModules: [
        'mylib'
    ],
    modules: [
        'nuxt-quasar-ui',
    ],
    quasar: {
        plugins: [
            'BottomSheet',
            'Dialog',
            'Loading',
            'LoadingBar',
            'Notify',
            'Dark',
        ],
        extras: {
            font: 'roboto-font',
        },
        components: {
            defaults: {
                QBtn: {
                    unelevated: true,
                },
            },
        },
    },
})`

I want to improve this and not import that way but rather access the component in a better way

As it is right now it works but I think you can inject all the components of the lib globally from nuxt.config.ts Currently, as it is, it works. I hope you can help me, thank you very much.

0

There are 0 best solutions below