@astrojs/vue
Advanced tools
Comparing version 1.0.2 to 1.1.0
# @astrojs/vue | ||
## 1.1.0 | ||
### Minor Changes | ||
- [#4897](https://github.com/withastro/astro/pull/4897) [`fd9d323a6`](https://github.com/withastro/astro/commit/fd9d323a68c0f0cbb3b019e0a05e2c33450f3d33) Thanks [@bluwy](https://github.com/bluwy)! - Support Vue JSX | ||
### Patch Changes | ||
- [#4842](https://github.com/withastro/astro/pull/4842) [`812658ad2`](https://github.com/withastro/astro/commit/812658ad2ab3732a99e35c4fd903e302e723db46) Thanks [@bluwy](https://github.com/bluwy)! - Add missing dependencies, support strict dependency installation (e.g. pnpm) | ||
## 1.0.2 | ||
@@ -4,0 +14,0 @@ |
@@ -1,3 +0,8 @@ | ||
import type { Options } from '@vitejs/plugin-vue'; | ||
import type { Options as VueOptions } from '@vitejs/plugin-vue'; | ||
import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx'; | ||
import type { AstroIntegration } from 'astro'; | ||
interface Options extends VueOptions { | ||
jsx?: boolean | VueJsxOptions; | ||
} | ||
export default function (options?: Options): AstroIntegration; | ||
export {}; |
@@ -9,4 +9,19 @@ import vue from "@vitejs/plugin-vue"; | ||
} | ||
function getViteConfiguration(options) { | ||
function getJsxRenderer() { | ||
return { | ||
name: "@astrojs/vue (jsx)", | ||
clientEntrypoint: "@astrojs/vue/client.js", | ||
serverEntrypoint: "@astrojs/vue/server.js", | ||
jsxImportSource: "vue", | ||
jsxTransformOptions: async () => { | ||
const jsxPlugin = (await import("@vue/babel-plugin-jsx")).default; | ||
return { | ||
plugins: [jsxPlugin] | ||
}; | ||
} | ||
}; | ||
} | ||
async function getViteConfiguration(options) { | ||
var _a; | ||
const config = { | ||
optimizeDeps: { | ||
@@ -22,2 +37,8 @@ include: ["@astrojs/vue/client.js", "vue"], | ||
}; | ||
if (options == null ? void 0 : options.jsx) { | ||
const vueJsx = (await import("@vitejs/plugin-vue-jsx")).default; | ||
const jsxOptions = typeof options.jsx === "object" ? options.jsx : void 0; | ||
(_a = config.plugins) == null ? void 0 : _a.push(vueJsx(jsxOptions)); | ||
} | ||
return config; | ||
} | ||
@@ -28,5 +49,8 @@ function src_default(options) { | ||
hooks: { | ||
"astro:config:setup": ({ addRenderer, updateConfig }) => { | ||
"astro:config:setup": async ({ addRenderer, updateConfig }) => { | ||
addRenderer(getRenderer()); | ||
updateConfig({ vite: getViteConfiguration(options) }); | ||
if (options == null ? void 0 : options.jsx) { | ||
addRenderer(getJsxRenderer()); | ||
} | ||
updateConfig({ vite: await getViteConfiguration(options) }); | ||
} | ||
@@ -33,0 +57,0 @@ } |
{ | ||
"name": "@astrojs/vue", | ||
"version": "1.0.2", | ||
"version": "1.1.0", | ||
"description": "Use Vue components within Astro", | ||
@@ -32,7 +32,10 @@ "type": "module", | ||
"@vitejs/plugin-vue": "^3.0.0", | ||
"vite": "^3.0.0" | ||
"@vitejs/plugin-vue-jsx": "^2.0.1", | ||
"@vue/babel-plugin-jsx": "^1.1.1", | ||
"@vue/compiler-sfc": "^3.2.39" | ||
}, | ||
"devDependencies": { | ||
"astro": "1.2.2", | ||
"astro-scripts": "0.0.7", | ||
"astro": "1.4.0", | ||
"astro-scripts": "0.0.8", | ||
"vite": "^3.0.0", | ||
"vue": "^3.2.37" | ||
@@ -39,0 +42,0 @@ }, |
@@ -60,6 +60,14 @@ # @astrojs/vue 💚 | ||
- 💧 client-side hydration options, and | ||
- 🪆 opportunities to mix and nest frameworks together | ||
- 🤝 opportunities to mix and nest frameworks together | ||
Also check our [Astro Integration Documentation][astro-integration] for more on integrations. | ||
## Troubleshooting | ||
For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help! | ||
You can also check our [Astro Integration Documentation][astro-integration] for more on integrations. | ||
## Contributing | ||
This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! | ||
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/ | ||
@@ -90,1 +98,38 @@ [astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components | ||
``` | ||
### jsx | ||
You can use Vue JSX by setting `jsx: true`. | ||
__`astro.config.mjs`__ | ||
```js | ||
import { defineConfig } from 'astro/config'; | ||
import vue from '@astrojs/vue'; | ||
export default defineConfig({ | ||
integrations: [ | ||
vue({ jsx: true }) | ||
], | ||
}); | ||
``` | ||
This will enable rendering for both Vue and Vue JSX components. To customize the Vue JSX compiler, pass an options object instead of a boolean. See the `@vitejs/plugin-vue-jsx` [docs](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) for more details. | ||
__`astro.config.mjs`__ | ||
```js | ||
import { defineConfig } from 'astro/config'; | ||
import vue from '@astrojs/vue'; | ||
export default defineConfig({ | ||
integrations: [ | ||
vue({ | ||
jsx: { | ||
// treat any tag that starts with ion- as custom elements | ||
isCustomElement: tag => tag.startsWith('ion-') | ||
} | ||
}) | ||
], | ||
}); | ||
``` |
@@ -1,6 +0,11 @@ | ||
import type { Options } from '@vitejs/plugin-vue'; | ||
import type { Options as VueOptions } from '@vitejs/plugin-vue'; | ||
import vue from '@vitejs/plugin-vue'; | ||
import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx'; | ||
import type { AstroIntegration, AstroRenderer } from 'astro'; | ||
import type { UserConfig } from 'vite'; | ||
interface Options extends VueOptions { | ||
jsx?: boolean | VueJsxOptions; | ||
} | ||
function getRenderer(): AstroRenderer { | ||
@@ -14,4 +19,19 @@ return { | ||
function getViteConfiguration(options?: Options): UserConfig { | ||
function getJsxRenderer(): AstroRenderer { | ||
return { | ||
name: '@astrojs/vue (jsx)', | ||
clientEntrypoint: '@astrojs/vue/client.js', | ||
serverEntrypoint: '@astrojs/vue/server.js', | ||
jsxImportSource: 'vue', | ||
jsxTransformOptions: async () => { | ||
const jsxPlugin = (await import('@vue/babel-plugin-jsx')).default; | ||
return { | ||
plugins: [jsxPlugin], | ||
}; | ||
}, | ||
}; | ||
} | ||
async function getViteConfiguration(options?: Options): Promise<UserConfig> { | ||
const config: UserConfig = { | ||
optimizeDeps: { | ||
@@ -27,2 +47,10 @@ include: ['@astrojs/vue/client.js', 'vue'], | ||
}; | ||
if (options?.jsx) { | ||
const vueJsx = (await import('@vitejs/plugin-vue-jsx')).default; | ||
const jsxOptions = typeof options.jsx === 'object' ? options.jsx : undefined; | ||
config.plugins?.push(vueJsx(jsxOptions)); | ||
} | ||
return config; | ||
} | ||
@@ -34,5 +62,8 @@ | ||
hooks: { | ||
'astro:config:setup': ({ addRenderer, updateConfig }) => { | ||
'astro:config:setup': async ({ addRenderer, updateConfig }) => { | ||
addRenderer(getRenderer()); | ||
updateConfig({ vite: getViteConfiguration(options) }); | ||
if (options?.jsx) { | ||
addRenderer(getJsxRenderer()); | ||
} | ||
updateConfig({ vite: await getViteConfiguration(options) }); | ||
}, | ||
@@ -39,0 +70,0 @@ }, |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
26095
268
134
5
4
+ Added@vue/babel-plugin-jsx@^1.1.1
+ Added@vue/compiler-sfc@^3.2.39
+ Added@ampproject/remapping@2.3.0(transitive)
+ Added@babel/code-frame@7.24.7(transitive)
+ Added@babel/compat-data@7.25.4(transitive)
+ Added@babel/core@7.25.2(transitive)
+ Added@babel/generator@7.25.6(transitive)
+ Added@babel/helper-annotate-as-pure@7.24.7(transitive)
+ Added@babel/helper-compilation-targets@7.25.2(transitive)
+ Added@babel/helper-create-class-features-plugin@7.25.4(transitive)
+ Added@babel/helper-member-expression-to-functions@7.24.8(transitive)
+ Added@babel/helper-module-imports@7.24.7(transitive)
+ Added@babel/helper-module-transforms@7.25.2(transitive)
+ Added@babel/helper-optimise-call-expression@7.24.7(transitive)
+ Added@babel/helper-plugin-utils@7.24.8(transitive)
+ Added@babel/helper-replace-supers@7.25.0(transitive)
+ Added@babel/helper-simple-access@7.24.7(transitive)
+ Added@babel/helper-skip-transparent-expression-wrappers@7.24.7(transitive)
+ Added@babel/helper-validator-option@7.24.8(transitive)
+ Added@babel/helpers@7.25.6(transitive)
+ Added@babel/highlight@7.24.7(transitive)
+ Added@babel/plugin-syntax-jsx@7.24.7(transitive)
+ Added@babel/plugin-syntax-typescript@7.25.4(transitive)
+ Added@babel/plugin-transform-typescript@7.25.2(transitive)
+ Added@babel/template@7.25.0(transitive)
+ Added@babel/traverse@7.25.6(transitive)
+ Added@jridgewell/gen-mapping@0.3.5(transitive)
+ Added@jridgewell/resolve-uri@3.1.2(transitive)
+ Added@jridgewell/set-array@1.2.1(transitive)
+ Added@jridgewell/trace-mapping@0.3.25(transitive)
+ Added@vitejs/plugin-vue-jsx@2.1.1(transitive)
+ Added@vue/babel-helper-vue-transform-on@1.2.5(transitive)
+ Added@vue/babel-plugin-jsx@1.2.5(transitive)
+ Added@vue/babel-plugin-resolve-type@1.2.5(transitive)
+ Addedansi-styles@3.2.1(transitive)
+ Addedbrowserslist@4.23.3(transitive)
+ Addedcaniuse-lite@1.0.30001660(transitive)
+ Addedchalk@2.4.2(transitive)
+ Addedcolor-convert@1.9.3(transitive)
+ Addedcolor-name@1.1.3(transitive)
+ Addedconvert-source-map@2.0.0(transitive)
+ Addeddebug@4.3.7(transitive)
+ Addedelectron-to-chromium@1.5.24(transitive)
+ Addedescalade@3.2.0(transitive)
+ Addedescape-string-regexp@1.0.5(transitive)
+ Addedgensync@1.0.0-beta.2(transitive)
+ Addedglobals@11.12.0(transitive)
+ Addedhas-flag@3.0.0(transitive)
+ Addedhtml-tags@3.3.1(transitive)
+ Addedjs-tokens@4.0.0(transitive)
+ Addedjsesc@2.5.2(transitive)
+ Addedjson5@2.2.3(transitive)
+ Addedlru-cache@5.1.1(transitive)
+ Addedms@2.1.3(transitive)
+ Addednode-releases@2.0.18(transitive)
+ Addedsemver@6.3.1(transitive)
+ Addedsupports-color@5.5.0(transitive)
+ Addedsvg-tags@1.0.0(transitive)
+ Addedupdate-browserslist-db@1.1.0(transitive)
+ Addedyallist@3.1.1(transitive)
- Removedvite@^3.0.0