@astrojs/vue - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

 # @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 @@

dist/index.d.ts

@@ -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 {};

dist/index.js

@@ -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 @@ }

package.json

 {
   "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 @@ },

README.md

@@ -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-')
+      }
+    })
+  ],
+});
+```

src/index.ts

@@ -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 @@ },

No alert changes

Improved metrics

Total package byte prevSize

26095

16.12%

Lines of code

268

26.42%

Number of lines in readme file

134

50.56%

Worsened metrics

Dependency count

5

66.67%

Dev dependency count

4

33.33%

Dependency changes

• + Added

  @vitejs/plugin-vue-jsx@^2.0.1

• + 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.27.1
  (transitive)

• + Added

  @babel/compat-data@7.28.0
  (transitive)

• + Added

  @babel/core@7.28.0
  (transitive)

• + Added

  @babel/generator@7.28.0
  (transitive)

• + Added

  @babel/helper-annotate-as-pure@7.27.3
  (transitive)

• + Added

  @babel/helper-compilation-targets@7.27.2
  (transitive)

• + Added

  @babel/helper-create-class-features-plugin@7.27.1
  (transitive)

• + Added

  @babel/helper-globals@7.28.0
  (transitive)

• + Added

  @babel/helper-member-expression-to-functions@7.27.1
  (transitive)

• + Added

  @babel/helper-module-imports@7.27.1
  (transitive)

• + Added

  @babel/helper-module-transforms@7.27.3
  (transitive)

• + Added

  @babel/helper-optimise-call-expression@7.27.1
  (transitive)

• + Added

  @babel/helper-plugin-utils@7.27.1
  (transitive)

• + Added

  @babel/helper-replace-supers@7.27.1
  (transitive)

• + Added

  @babel/helper-skip-transparent-expression-wrappers@7.27.1
  (transitive)

• + Added

  @babel/helper-validator-option@7.27.1
  (transitive)

• + Added

  @babel/helpers@7.27.6
  (transitive)

• + Added

  @babel/plugin-syntax-jsx@7.27.1
  (transitive)

• + Added

  @babel/plugin-syntax-typescript@7.27.1
  (transitive)

• + Added

  @babel/plugin-transform-typescript@7.28.0
  (transitive)

• + Added

  @babel/template@7.27.2
  (transitive)

• + Added

  @babel/traverse@7.28.0
  (transitive)

• + Added

  @jridgewell/gen-mapping@0.3.12
  (transitive)

• + Added

  @jridgewell/resolve-uri@3.1.2
  (transitive)

• + Added

  @jridgewell/trace-mapping@0.3.29
  (transitive)

• + Added

  @vitejs/plugin-vue-jsx@2.1.1
  (transitive)

• + Added

  @vue/babel-helper-vue-transform-on@1.4.0
  (transitive)

• + Added

  @vue/babel-plugin-jsx@1.4.0
  (transitive)

• + Added

  @vue/babel-plugin-resolve-type@1.4.0
  (transitive)

• + Added

  browserslist@4.25.1
  (transitive)

• + Added

  caniuse-lite@1.0.30001727
  (transitive)

• + Added

  convert-source-map@2.0.0
  (transitive)

• + Added

  debug@4.4.1
  (transitive)

• + Added

  electron-to-chromium@1.5.182
  (transitive)

• + Added

  escalade@3.2.0
  (transitive)

• + Added

  gensync@1.0.0-beta.2
  (transitive)

• + Added

  js-tokens@4.0.0
  (transitive)

• + Added

  jsesc@3.1.0
  (transitive)

• + Added

  json5@2.2.3
  (transitive)

• + Added

  lru-cache@5.1.1
  (transitive)

• + Added

  ms@2.1.3
  (transitive)

• + Added

  node-releases@2.0.19
  (transitive)

• + Added

  semver@6.3.1
  (transitive)

• + Added

  update-browserslist-db@1.1.3
  (transitive)

• + Added

  yallist@3.1.1
  (transitive)

• - Removed

  vite@^3.0.0