@astrojs/vue - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

 # @astrojs/vue
 
+## 1.2.0
+
+### Minor Changes
+
+- [#5075](https://github.com/withastro/astro/pull/5075) [`d25f54cb9`](https://github.com/withastro/astro/commit/d25f54cb9306eea9ed0445af8f77604dacacad43) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Add support for the `appEntrypoint` option, which accepts a root-relative path to an app entrypoint. The default export of this file should be a function that accepts a Vue `App` instance prior to rendering. This opens up the ability to extend the `App` instance with [custom Vue plugins](https://vuejs.org/guide/reusability/plugins.html).
+
+  ```js
+  // astro.config.mjs
+  import { defineConfig } from 'astro/config';
+  import vue from '@astrojs/vue';
+
+  export default defineConfig({
+    integrations: [
+      vue({
+        appEntrypoint: '/src/pages/_app',
+      }),
+    ],
+  });
+  ```
+
+  ```js
+  // src/pages/_app.ts
+  import type { App } from 'vue';
+  import i18nPlugin from '../plugins/i18n';
+
+  export default function setup(app: App) {
+    app.use(i18nPlugin, {
+      /* options */
+    });
+  }
+  ```
+
 ## 1.1.0
@@ -4,0 +36,0 @@

client.js

 import { h, createSSRApp, createApp } from 'vue';
+import { setup } from 'virtual:@astrojs/vue/app';
 import StaticHtml from './static-html.js';
 
 export default (element) =>
-	(Component, props, slotted, { client }) => {
+	async (Component, props, slotted, { client }) => {
 		delete props['class'];
@@ -17,7 +18,9 @@ if (!element.hasAttribute('ssr')) return;
 			const app = createApp({ name, render: () => h(Component, props, slots) });
+			await setup(app);
 			app.mount(element, false);
 		} else {
 			const app = createSSRApp({ name, render: () => h(Component, props, slots) });
+			await setup(app);
 			app.mount(element, true);
 		}
 	};

dist/index.d.ts

@@ -6,4 +6,5 @@ import type { Options as VueOptions } from '@vitejs/plugin-vue';
     jsx?: boolean | VueJsxOptions;
+    appEntrypoint?: string;
 }
 export default function (options?: Options): AstroIntegration;
 export {};

dist/index.js

@@ -23,2 +23,22 @@ import vue from "@vitejs/plugin-vue";
 }
+function virtualAppEntrypoint(options) {
+  const virtualModuleId = "virtual:@astrojs/vue/app";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
+  return {
+    name: "@astrojs/vue/virtual-app",
+    resolveId(id) {
+      if (id == virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        if (options == null ? void 0 : options.appEntrypoint) {
+          return `export { default as setup } from "${options.appEntrypoint}";`;
+        }
+        return `export const setup = () => {};`;
+      }
+    }
+  };
+}
 async function getViteConfiguration(options) {
@@ -29,5 +49,5 @@ var _a;
       include: ["@astrojs/vue/client.js", "vue"],
-      exclude: ["@astrojs/vue/server.js"]
+      exclude: ["@astrojs/vue/server.js", "virtual:@astrojs/vue/app"]
     },
-    plugins: [vue(options)],
+    plugins: [vue(options), virtualAppEntrypoint(options)],
     ssr: {
@@ -34,0 +54,0 @@ external: ["@vue/server-renderer"],

package.json

 {
   "name": "@astrojs/vue",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Use Vue components within Astro",
@@ -37,4 +37,8 @@ "type": "module",
   "devDependencies": {
-    "astro": "1.4.0",
+    "@types/chai": "^4.3.3",
+    "astro": "1.5.1",
     "astro-scripts": "0.0.8",
+    "chai": "^4.3.6",
+    "linkedom": "^0.14.17",
+    "mocha": "^9.2.2",
     "vite": "^3.0.0",
@@ -52,4 +56,5 @@ "vue": "^3.2.37"
     "build:ci": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist",
-    "dev": "astro-scripts dev \"src/**/*.ts\""
+    "dev": "astro-scripts dev \"src/**/*.ts\"",
+    "test": "mocha --timeout 20000"
   }
 }

README.md

@@ -98,2 +98,32 @@ # @astrojs/vue 💚
 
+### appEntrypoint
+
+You can extend the Vue `app` instance setting the `appEntrypoint` option to a root-relative import specifier (for example, `appEntrypoint: "/src/pages/_app"`).
+
+The default export of this file should be a function that accepts a Vue `App` instance prior to rendering, allowing the use of [custom Vue plugins](https://vuejs.org/guide/reusability/plugins.html), `app.use`, and other customizations for advanced use cases.
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+export default defineConfig({
+  integrations: [
+    vue({ appEntrypoint: '/src/pages/_app' })
+  ],
+});
+```
+
+__`src/pages/_app.ts`__
+
+```js
+import type { App } from 'vue';
+import i18nPlugin from 'my-vue-i18n-plugin';
+
+export default (app: App) => {
+  app.use(i18nPlugin);
+}
+```
+
 ### jsx
@@ -100,0 +130,0 @@

server.js

 import { h, createSSRApp } from 'vue';
 import { renderToString } from 'vue/server-renderer';
+import { setup } from 'virtual:@astrojs/vue/app';
 import StaticHtml from './static-html.js';
@@ -15,2 +16,3 @@
 	const app = createSSRApp({ render: () => h(Component, props, slots) });
+	await setup(app);
 	const html = await renderToString(app);
@@ -17,0 +19,0 @@ return { html };

src/index.ts

@@ -9,2 +9,3 @@ import type { Options as VueOptions } from '@vitejs/plugin-vue';
 	jsx?: boolean | VueJsxOptions;
+	appEntrypoint?: string;
 }
@@ -35,2 +36,23 @@
 
+function virtualAppEntrypoint(options?: Options) {
+	const virtualModuleId = 'virtual:@astrojs/vue/app';
+	const resolvedVirtualModuleId = '\0' + virtualModuleId;
+	return {
+		name: '@astrojs/vue/virtual-app',
+		resolveId(id: string) {
+			if (id == virtualModuleId) {
+				return resolvedVirtualModuleId;
+			}
+		},
+		load(id: string) {
+			if (id === resolvedVirtualModuleId) {
+				if (options?.appEntrypoint) {
+					return `export { default as setup } from "${options.appEntrypoint}";`;
+				}
+				return `export const setup = () => {};`;
+			}
+		},
+	};
+}
+
 async function getViteConfiguration(options?: Options): Promise<UserConfig> {
@@ -40,5 +62,5 @@ const config: UserConfig = {
 			include: ['@astrojs/vue/client.js', 'vue'],
-			exclude: ['@astrojs/vue/server.js'],
+			exclude: ['@astrojs/vue/server.js', 'virtual:@astrojs/vue/app'],
 		},
-		plugins: [vue(options)],
+		plugins: [vue(options), virtualAppEntrypoint(options)],
 		ssr: {
@@ -45,0 +67,0 @@ external: ['@vue/server-renderer'],

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32495

increased by24.53%

Number of package files

24

increased by60%

Lines of code

370

increased by38.06%

Number of lines in readme file

164

increased by22.39%

Worsened metrics

Dev dependency count

8

increased by100%

No dependency changes