Auto import

Using auto import in Vue 3 with Vite and Nuxt 3 streamlines development by reducing boilerplate code, boosting productivity with automatic component imports, and also supporting TypeScript types.

Vue 3 + Vite

To enable auto import in a Vue 3 project using Vite, you need to configure your vite.config.ts.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import pixelComponent from '@mekari/pixel3-auto-import'

export default defineConfig({
  plugins: [vue(), vueJsx(), pixelComponent()]
})

View example

Nuxt

To enable auto import component in a Nuxt 3 or Nuxt 4 project, you need to configure your nuxt.config.ts,

WARNING

The Nuxt module provides auto import and additional features. For more details, see the documentation.

export default defineNuxtConfig({
  modules: [
    '@mekari/pixel3-nuxt'
  ],
})

View example