Ecosystem
Besides Vite plugin and VSCode extension, Vine also provides some other libraries that you might need.
Custom ESLint parser
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 haven't provided any specific ESLint rules for Vue Vine yet, but it's supposed to work with most of the existing rule presets like @antfu/eslint-config
, @sxzz/eslint-config
, etc.
But style rules are not fully supported yet:
ESLint-Stylistics
will break template format due to some issueseslint-plugin-prettier
seems fine but doesn't fix much for template formatting.
To configure the custom parser, run the following command to install the package:
pnpm i -D @vue-vine/eslint-parser
Then, add the following configuration to your eslint.config.mjs
:
import antfu from '@antfu/eslint-config'
import * as VueVineESLintParser from '@vue-vine/eslint-parser'
export default antfu(
{
// Override settings
// for antfu's ESLint config
},
{
// Some user config
// that might been used
// for non-Vine files
},
{
files: [
'path/to/**/*.vine.ts',
],
languageOptions: {
parser: VueVineESLintParser,
},
rules: {
// Customize rules here
// for `.vine.ts` files
},
},
)
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!