2021-06-28 10:46:10 -05:00
|
|
|
# Using Vue with Astro
|
|
|
|
|
2021-07-21 18:10:03 -05:00
|
|
|
This example showcases Astro's built-in support for [Vue](https://v3.vuejs.org/).
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
|
|
### Automatic
|
|
|
|
|
|
|
|
Bootstrap your Astro project with this template!
|
|
|
|
|
|
|
|
```shell
|
2021-07-20 20:06:11 -05:00
|
|
|
npm init astro -- --template framework-vue
|
2021-07-01 07:43:25 -05:00
|
|
|
```
|
|
|
|
|
2021-07-21 18:10:03 -05:00
|
|
|
### Manual
|
|
|
|
|
|
|
|
To use Vue components in your Astro project:
|
|
|
|
|
|
|
|
1. Install `@astrojs/renderer-vue`
|
|
|
|
|
|
|
|
```shell
|
|
|
|
npm i @astrojs/renderer-vue
|
|
|
|
```
|
|
|
|
|
|
|
|
2. Add `"@astrojs/renderer-vue"` to your `renderers` in `astro.config.mjs`.
|
|
|
|
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
renderers: [
|
|
|
|
"@astrojs/renderer-vue",
|
|
|
|
// optionally, others...
|
|
|
|
]
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## Usage
|
2021-06-28 10:46:10 -05:00
|
|
|
|
2021-07-21 18:10:03 -05:00
|
|
|
Write your Vue components as `.vue` files in your project.
|