vixt

Vixt

Introduction

Vixt is a Vite plugin designed to improve developer experience (DX), inspired by Nuxt. The name combines the first two letters of Vite and the last two letters of Nuxt.

Vixt aims to bring Nuxt-style productivity features to popular modern frameworks such as Vue, React, and Uni-app. It includes filesystem routing, layouts, auto-imports, plugins, modules, layers, server-side features, and more. Built on Vite 8 for faster development and build speed, Nitro provides the ability to build full-stack applications.

Installation

Try Vitesse built with Vixt

vitesse-vixt

Create a Vixt project

Vixt recommends using pnpm with a monorepo setup, and the default project template is monorepo-based.

# Default monorepo template, including vue, uni-app and react projects
pnpm create vixt my-project

Use in an existing project

• Remove duplicate dependencies in package.json that Vixt already provides (such as vue, vite, etc., not required).
• Create a .npmrc file and enable pnpm's shamefully-hoist:

shamefully-hoist=true

• Install Vixt:

pnpm add vixt @vixt/vue

• Create vixt.config.ts:

import { defineVixtConfig } from 'vixt'

export default defineVixtConfig({})

• Update vite.config.ts:

import { defineConfig } from 'vite'
import vixt from 'vixt/vue'

export default defineConfig({
  plugins: [vixt()],
})

• Update tsconfig.json:

{
  "extends": "./.vixt/tsconfig.json"
}

Packages

Thanks

This project is highly inspired by Nuxt and Vite.

Thanks to UnJS for creating helpful packages.

License

MIT License © 2024-PRESENT SoulLyoko