@louth/inertia-vue3-unplugin-resolver NPM

@louth/inertia-vue3-unplugin-resolver

Custom resolver for Vue 3 projects using Inertia.js, enabling automatic imports of Inertia components and composables.

Features

Auto-import Inertia.js components (<Link>, <Head>, etc.)
Auto-import Inertia.js composables (useForm, usePage, etc.)
Zero configuration needed for supported imports
Works with unplugin-vue-components and unplugin-auto-import

Installation

# npm
npm install @louth/inertia-vue3-unplugin-resolver --save-dev

# yarn
yarn add @louth/inertia-vue3-unplugin-resolver -D

# pnpm
pnpm add @louth/inertia-vue3-unplugin-resolver -D

Usage

Setup with Vite

// vite.config.js
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import Components from "unplugin-vue-components/vite"
import AutoImport from "unplugin-auto-import/vite"
import {
  InertiaVueComponentResolver,
  InertiaVueImports,
} from "@louth/inertia-vue3-unplugin-resolver"

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [InertiaVueComponentResolver()],
    }),
    AutoImport({
      imports: [InertiaVueImports],
    }),
  ],
})

Setup with Webpack

// webpack.config.js
const {
  InertiaVueComponentResolver,
  InertiaVueImports,
} = require("@louth/inertia-vue3-unplugin-resolver")
const Components = require("unplugin-vue-components/webpack")
const AutoImport = require("unplugin-auto-import/webpack")

module.exports = {
  // ...
  plugins: [
    Components({
      resolvers: [InertiaVueComponentResolver()],
    }),
    AutoImport({
      imports: [InertiaVueImports],
    }),
  ],
}