Vue Auto Vite Components

Having a separate component for every task in Vue makes it amazingly simple to keep logic grouped together in a way that makes code-maintenance a breeze.

Less fun, though, is having to write a dozen lines of imports inside every Single File Component in Vue. Even worse if you want those imports to be loaded asynchronously.

Existing Solutions

If you’re using Nuxt, you’ll have automatic component registration/loading out-of-the-box. For everyone else, there’s Unplugin Auto Components. There’s just one problem here, every one of your components is registered as a synchronous component. This is fine for smaller apps, but for the bigger projects, that means every one of your components has to be loaded before anything can show.

Our Different Approach

We decided to let users split their components into loading strategy by folder: sync, async and web.

Sync components are loaded immediately and best for high-use components or ones that are need for common landing pages.

Async components are registered with defineAsyncComponent and therefore do not download until they are detected in your markup. You can also specify a custom loader component which can be useful for long-hydration elements.

Finally, web components are a special case which registers the SFC as a native web-component. These files must use .ce.vue extensions.

Installation

// PNPM
pnpm add vue3-auto-vite-components

// NPM
npm i vue3-auto-vite-components

// Yarn
yarn add vue3-auto-vite-components

Usage

This plugin should be used before your app is mounted.

import { createApp } from "vue";
import App from "./App.vue";
import { registerComponents } from "vue3-auto-vite-components";

createApp(App)
  .use(registerComponents, {
	namespace: "Evo",
	sync: import.meta.glob("./components/sync/**/*.vue", { eager: true }),
	async: import.meta.glob("./components/async/**/*.vue", { eager: false }),
	asyncLoading: import.meta.glob("./components/async/**/*Loading.vue", {
		eager: true,
	}),
	web: import.meta.glob("./components/web/**/*.vue", { eager: true })
  })
  .mount('#app');

Pay special attention to the eager prop that is passed to the Vite glob loader.

Namespace

In the code above, we pass “Evo” as a namespace. This means that every component registered is prefixed with it. For sync/async components, that will be EvoComponent and for web components, that will equal evo-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 EvoLayoutHeaderMenu.

Or if you had ./components/async/nav-items/footer/SocialLinks.vue, then your registered component name would be EvoNavItemsFooterSocialLinks.

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 <evo-layout-header></evo-layout-header>.