vite-plugin-vue-globals

Supercharge your Vue 3 projects by seamlessly adding global components, global variables, global properties, and string literals.

Features:

• 🌍 Global Components: Automatically import and register Vue components across your entire project.
• 🌐 Global Variables & Properties: Centralize and manage your globals, ensuring they're accessible from anywhere.
• 📜 String Literals: Define and manage string literals, making them easily accessible and ensuring type safety.
• 🔧 Flexible Configuration: Use regular expressions to specify which files to include or exclude, and effortlessly tailor the plugin to your needs.

Installation

npm i -D vite-plugin-vue-globals

Usage

export default defineConfig({
    plugins: [
        VueGlobals({
            dts: './src/vue-globals.d.ts',
            components: {
                dir: './src/components',
                exclude: /modals\//,
            },
            globals: {
                Modal: './helpers/modal',
                useModal: {
                    path: './composables/modal',
                    export: 'useModal',
                },
                $t: {
                    path: './i18n',
                    export: 'i18n',
                    property: ['global', 't'],
                },
                vue: {
                    path: 'vue',
                    export: ['ref', 'reactive', 'computed', 'watch', 'onMounted', 'nextTick'],
                },
            },
            globalProperties: {
                format: './helpers/format',
                toast: {
                    path: './helpers/toast',
                    export: 'Toast',
                },
                openModal: {
                    path: './helpers/modal',
                    export: 'Modal',
                    property: 'open',
                },
            },
            globalDirectories: [
                './src/composables',
                {
                    path: './src/services',
                    exclude: /auth/i,
                    include: undefined,
                    map: (value) => `${value}Service`,
                },
            ],
            stringLiterals: {
                VModal: './src/components/modals',
                VIcon: {
                    dir: './src/assets/icons',
                    include: /.global.svg/,
                    exclude: undefined,
                    map: (value) => value.replace('icon-', ''),
                },
            },
            insert: {
                after: 'const app = createApp(App);',
            },
        }),
        vue(),
    ],
});