Another style of writing Vue components.
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.
Vue Vine
was designed to provide more flexibility of managing Vue components. It is a parallel style to SFC.
Take a quick view:
# 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()
],
})
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](https://private-user-images.githubusercontent.com/46062972/259282157-374b77a4-9d49-4eb6-a84b-f7ab64b99bdf.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDAwMjUzOTIsIm5iZiI6MTc0MDAyNTA5MiwicGF0aCI6Ii80NjA2Mjk3Mi8yNTkyODIxNTctMzc0Yjc3YTQtOWQ0OS00ZWI2LWE4NGItZjdhYjY0Yjk5YmRmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjIwVDA0MTgxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWEwNWIzODMxM2U3M2M5YTFlZThiNDIxMGM5ZGZmM2YzOTE3MTYyNWQzZDMwNzAxMGMxMjNiYjYzNzdiNTM1YTUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.krT6Y04k3Jk1qS3347uanHLA_loSGWIWPnCeFiGfUZg)
Then start the Playground's dev server in another terminal session.
pnpm run play
- You can see the demo in
http://localhost:3333/
. - You can inspect the transforming process in
http://localhost:3333/__inspect/