Get started

🚨 WARNING

Before starting to use it, you're supposed to know the following conventions:

• Vine was designed to only support Vue 3.0+ and Vite.
• Vine is designed to support only TypeScript, JavaScript-only users can't harness the complete range of functionalities.

Welcome to join us to exploring another style of writing Vue!

Install Vue Vine in your project:

pnpm i -D vue-vine

Vine provides a Vite plugin and a VSCode extension to offer feature support.

Besides, we also provide some other libraries that you might need during development or configuration, you can learn more details in the next section Ecosystem.

Install Vite plugin

Use the plugin in vite.config.ts:

vite.config.ts

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

export default defineConfig({
  plugins: [
    // ...Other plugins
    VineVitePlugin()
  ],
})

Create project with CLI

You can gradually integrate Vue Vine into an existing Vue 3 project, but if you want to start a new project, give up SFC, and only use Vue Vine, we also provide a project template for you.

Run the following command to create a new project:

pnpx create-vue-vine my-vine-project

Another way: You can also choose to install the CLI globally

pnpm i -g create-vue-vine

Click here to preview the subsequent operations after running the CLI

...

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

...

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

   cd my-vine-project
   pnpm dev

   Happy hacking!

Install VSCode extension

Search "Vue Vine" in the marketplace and install it.

Use macro types

Vine provides a typescript declaration file to help you write macros with intellisense.

tsconfig.json

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