Vue3 Auto Vite Components
Part of southcoastweb's contribution to Free and Open Source Software (FOSS)
To read more about southcoastweb and our open-source software, go to our Open-Source page.
Based on our article for Automatic Vue Component Registration with Vite, we decided to release it as a Vue application plugin to enable you to easily and automatically register your component folders of sync, async and web components.
Your component names are generated based on a provided namespace, directory path and then the component filename.
Installation
Install the package with one of the following:
// NPMnpm i vue3-auto-vite-components
// Yarnyarn add vue3-auto-vite-componentsUsage
While standard auto-import loaders use the build process (i.e. a plugin for Vite or Webpack) to automatically import/register your components, this package takes a slightly different tack and instead uses built-in Vue and Vite functionality to achieve the task via a Vue plugin, so open up your app’s entry file:
1import { createApp } from "vue";2import App from "./App.vue";3import { registerComponents } from "vue3-auto-vite-components";4
5
6createApp(App)7 .use(registerComponents, {8 namespace: "Scw",9 sync: import.meta.glob("./components/sync/**/*.vue", { eager: true }),10 async: import.meta.glob("./components/async/**/*.vue", { eager: false }),11 asyncLoading: import.meta.glob("./components/async/**/*Loading.vue", {12 eager: true,13 }),14 web: import.meta.glob("./components/web/**/*.vue", { eager: true })15 })16 .mount('#app');Namespace
In the code above, we pass “Scw” as a namespace. This means that every component registered is prefixed with it. For sync/async components, that will be ScwComponent and for web components, that will equal scw-component.
Name Resolution (Sync/Async)
No distinction is made between async and sync components when generating a name (we wanted to make it easy to move them from one folder to the other without changing the component name) so don’t have the same component in the same folder path in both async and sync globs.
The final name of your component comprises three parts: the namespace, the path, and your component’s name.
Using the above, a component inside ./components/sync/layout/header/Menu.vue would be registered with the component name ScwLayoutHeaderMenu.
Or if you had ./components/async/nav-items/footer/SocialLinks.vue, then your registered component name would be ScwNavItemsFooterSocialLinks.
Note that any hyphens, underscores or spaces in your folder names are automatically converted to PascalCase.
Async Loading Components
You can pass a separate asyncLoading glob to the plugin options. When resolving an async component, the same location is checked for a Loading component which is used while waiting for your async component to load. A common use of these is to show skeleton loaders while more complex components are initiated. See the Vue documentation for more details.
Using the SocialLinks component example above, the plugin would check if ./components/async/nav-items/footer/SocialLinksLoading.vue existed, and if so, this would be used as a loading component.
Name Resolution (Web Components)
Vue and Vite can also be used to create web components / custom elements. Since these are extended HTML elements, the names are resolved slightly differently.
A component inside ./components/web/layout/Header.ce.vue would be registered as <scw-layout-header></scw-layout-header>.
Suggestions and Feedback
If you have any suggestions about this plugin or spot any issues, feel free to use our GitHub repository.