@vuecast/astro-module 0.0.2-beta.0 → 0.0.2-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +80 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,87 @@
|
|
|
1
1
|
# @vuecast/astro-module
|
|
2
2
|
|
|
3
|
-
Write Vue
|
|
3
|
+
Write Vue Single File Components (`.vue` files) in your Astro projects.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- Use `.vue` files as pages in your Astro project
|
|
8
|
+
- Full Vue SFC support with all Vue features
|
|
9
|
+
- Seamless integration with Astro's build system
|
|
10
|
+
- Ensures proper head rendering support
|
|
11
|
+
|
|
12
|
+
## Prerequisites
|
|
13
|
+
|
|
14
|
+
First, scaffold a new Astro project:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm create astro@latest
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Install the official Astro Vue integration:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npx astro add vue
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Installation
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
pnpm add @vuecast/astro-module
|
|
30
|
+
# or
|
|
31
|
+
npm install @vuecast/astro-module
|
|
32
|
+
# or
|
|
33
|
+
yarn add @vuecast/astro-module
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Usage
|
|
37
|
+
|
|
38
|
+
1. Add the integration to your `astro.config.mjs`. Note that `@vuecast/astro-module` must be added after the Vue integration:
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
import { defineConfig } from "astro/config";
|
|
42
|
+
import vue from "@astrojs/vue";
|
|
43
|
+
import vuecast from "@vuecast/astro-module";
|
|
44
|
+
|
|
45
|
+
export default defineConfig({
|
|
46
|
+
integrations: [
|
|
47
|
+
vue(), // Vue integration must come first
|
|
48
|
+
vuecast(), // Then add VueCast
|
|
49
|
+
],
|
|
50
|
+
});
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
2. Create `.vue` files in your `src/pages` directory:
|
|
54
|
+
|
|
55
|
+
```vue
|
|
56
|
+
<!-- src/pages/index.vue -->
|
|
57
|
+
<script setup lang="ts">
|
|
58
|
+
const fruits = ["apples", "oranges", "bananas", "cherries", "grapes"];
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<template>
|
|
62
|
+
<div>
|
|
63
|
+
<h1>Hello from VueCast!</h1>
|
|
64
|
+
<ul>
|
|
65
|
+
<li v-for="(fruit, index) in fruits" :key="index">
|
|
66
|
+
{{ index + 1 }}: {{ fruit }}
|
|
67
|
+
</li>
|
|
68
|
+
</ul>
|
|
69
|
+
</div>
|
|
70
|
+
</template>
|
|
71
|
+
|
|
72
|
+
<style scoped>
|
|
73
|
+
/* Your component styles here */
|
|
74
|
+
</style>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## How it Works
|
|
78
|
+
|
|
79
|
+
The integration:
|
|
80
|
+
|
|
81
|
+
1. Registers `.vue` as a valid page extension in Astro
|
|
82
|
+
2. Sets up the Vue renderer for processing `.vue` files
|
|
83
|
+
3. Ensures proper head rendering support for Vue components
|
|
84
|
+
4. Integrates with Astro's build system through Vite
|
|
8
85
|
|
|
9
86
|
## License
|
|
10
87
|
|