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 an 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.js
:
import antfu from '@antfu/eslint-config'
// `VueVine()` returns an 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",
}
}
Slidev plugin
Since v1.4.0, Vine also provides a plugin for Slidev, you can use it to register Vine components in your Slidev project.
To install the plugin, you should add a setup/main.ts
file in your Slidev project for setup Vue application, find more details in Slidev documentation.
import { defineAppSetup } from '@slidev/types'
import { VueVineSlidevPlugin } from 'vue-vine/slidev'
export default defineAppSetup(({ app }) => {
app.use(
VueVineSlidevPlugin(
// Make sure this glob path is relative to this `setup/main.ts` file
import.meta.glob('./components/*.vine.ts', { eager: true })
)
)
})
Common questions
UnoCSS Attribute Mode
💡Note
Currently, we can only partially solve this problem, i.e. only support using attribute mode on HTML tags, but not on component tags.
Because Vue Vine's template type checking enabled the strict mode of Vue language tools, so it is not allowed to use arbitrary attributes on the HTML tags in the template. This will affect the scenario of using UnoCSS Attribute Mode.
To solve this problem, please add a shims.d.ts
file to the project tsconfig.json
(the include
option) and write the following content:
declare module 'vue' {
interface HTMLAttributes {
[key: string]: any
}
}
export {}