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()
],
})
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 dev:ext
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkxOTEwMjIsIm5iZiI6MTcxOTE5MDcyMiwicGF0aCI6Ii80NjA2Mjk3Mi8yNTkyODIxNTctMzc0Yjc3YTQtOWQ0OS00ZWI2LWE4NGItZjdhYjY0Yjk5YmRmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI0VDAwNTg0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJhOTg0YTUyZjVhMDQxYWJhMzU5MjcyN2Y0YzE4Y2ZjNWQ1YTZhMjdkYWM1Yzg5NWM0MmE0YTdlMDcwMTU3MmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.1liPN_epDQsdf9pOAeVKRCO_gZZidf3XmIwOF52Bq34)
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/