Ecosystem

Besides Vite plugin and VSCode extension, Vine also provides some other libraries that you might need.

ESLint config

Since we defined a new syntax for .vine.ts, i.e. the tagged template string as Vue template, we need a custom ESLint parser make ESLint work. if you're curious about the internal implementation, you can check out the source code. In a shortnut, it will replace the ESTree node of tagged template string with a Vue template root node.

We indeed provide a ESLint config for Vue Vine now, and it's supposed to work with most popular rule presets like @antfu/eslint-config, @sxzz/eslint-config, etc.

But style rules are not fully supported yet, we will continue to make it better.

To configure the custom parser, run the following command to install the package:

pnpm i -D @vue-vine/eslint-config

Then, add the following configuration to your eslint.config.mjs:

import antfu from '@antfu/eslint-config'

// `VueVine()` returns a ESLint flat config
import VueVine from '@vue-vine/eslint-config'

export default antfu(
  {
    // First option is not Linter.FlatConfig,
    // it's a setting for antfu's config itself
  },
  ...VueVine(),
)

TypeScript checker in command line

As we know that Vue provided vue-tsc to run TypeScript check for .vue files, in order to support Vine, we also provide a similar command vue-vine-tsc to check .vine.ts files.

To be noticed: vue-vine-tsc is compatible with vue-tsc, so you can also use it to check .vue files.

To install the package, run the following command:

pnpm i -D vue-vine-tsc

Then, you may replace the vue-tsc -b && ... command in "build" script of package.json:

{
  "scripts": {
-    "build": "vue-tsc -b && vite build",
+    "build": "vue-vine-tsc -b && vite build",
  }
}

Project starter template

You're able to progressively integrate Vue Vine in existing Vue 3 projects, but if you want to start a new project, abandon SFC and just using Vue Vine, we provide a project starter template for you.

(Optional) Install the CLI globally:

pnpm i -g create-vue-vine

Then, run the following command to create a new project:

# If you didn't install the CLI globally
pnpx create-vue-vine my-vine-project

# If you installed the CLI globally
create-vue-vine my-vine-project

You may seen the following output:

> pnpx create-vue-vine my-vine-project

...

┌  Vue Vine - Another style of writing Vue components
│
◇  Use Vue Router?
│  Yes
│
◇  Project created at: /path/to/my-vine-project
│
◇  Install dependencies?
│  Yes
│

...

◇  Dependencies installed!
│
└  You're all set! Now run:

  cd my-vine-project
  pnpm dev

  Happy hacking!