Skip to content


Repository files navigation

Vue Vine


Another style of writing Vue components.

  • NPM version:   NPM Version
  • VSCode extension:   VSCode ext version
  • Check more details in docs:   Netlify Status
Why this ?

There are many discussions in community that hopes for a solution that supports writing multiple Vue components in a single file. That's why Vue Vine was born.

Vue Vine was designed to provide more flexibility of managing Vue components. It is a parallel style to SFC.

Take a quick view:

Quick view


# If you didn't install `@antfu/ni` yet, I highly recommend you to install it.
ni -D vue-vine

Use the plugin in vite.config.ts:

import { VineVitePlugin } from 'vue-vine/vite'

export default defineConfig({
  plugins: [
    // ...Other plugins

Then add macro's type definition in tsconfig.json:

  "compilerOptions": {
    "types": ["vue-vine/macros"]

For ESLint, install our custom ESLint parser:

ni -D @vue-vine/eslint-parser

You need to set custom ESLint parser for .vine.ts files:

// eslint.config.mjs
import antfu from '@antfu/eslint-config'
import * as VueVineESLintParser from '@vue-vine/eslint-parser'

export default antfu(
    // Override antfu's settings here:
    // - ESLint Stylistic is not supported yet
    stylistic: false,
    rules: {
      // ... Customize rules here
    files: [
    languageOptions: {
      parser: VueVineESLintParser,
    rules: {
      // ... Customize rules here

Finally, install the VSCode extension, search Vue Vine in the marketplace.


Try the demo

You can try the demo by following steps:

For development environment setup, first you need to get the VSCode extension bundle ouput.

git clone
cd vue-vine
pnpm install

# Build all the required packages
pnpm run build

# Build the VSCode extension
pnpm run build:ext

After building the VSCode extension, you can open the 'Debug' tab in VSCode, and start the 'Run Vine Extension' debug session.


Then start the Playground's dev server in another terminal session.

pnpm run play
  1. You can see the demo in http://localhost:3333/.
  2. You can inspect the transforming process in http://localhost:3333/__inspect/