Skip to content

DaZuiZui/vue-vine

 
 

Repository files navigation

Vue Vine

中文 README

Another style of writing Vue components.

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.

Check more details in our documentation. Netlify Status

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

Install

# 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
    VineVitePlugin()
  ],
})

Try the demo

warning: For now, Vue Vine is still under heavy development, please don't use it in production.

You can try the demo by following steps:

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

git clone https://github.com/vue-vine/vue-vine.git
cd vue-vine
pnpm install

# Build all the required packages
pnpm run build

# Start watching the VSCode extension's building
pnpm run ext:dev

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

image

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/

About

Another style of writing Vue components.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 92.2%
  • JavaScript 6.0%
  • Other 1.8%