fix(vue): Add default options to not transform assets (#10419)

* fix(vue): Add default options to not transform assets

* fix: oops merge correctly

* chore: changeset

* nit: address feedback

.changeset/bright-needles-teach.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/vue": patch
+---
+
+Fixes using images from public inside Vue components not working correctly

packages/integrations/vue/package.json

@@ -40,7 +40,7 @@
     "test": "astro-scripts test \"test/**/*.test.js\""
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^4.5.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/babel-plugin-jsx": "^1.1.5",
     "@vue/compiler-sfc": "^3.3.8"

packages/integrations/vue/src/index.ts

@@ -65,7 +65,7 @@ function virtualAppEntrypoint(options?: Options): Plugin {
 				if (appEntrypoint) {
 					return `\
 import * as mod from ${JSON.stringify(appEntrypoint)};
-						
+
 export const setup = async (app) => {
 	if ('default' in mod) {
 		await mod.default(app);
@@ -101,12 +101,20 @@ export const setup = async (app) => {
 }
 
 async function getViteConfiguration(options?: Options): Promise<UserConfig> {
+	let vueOptions = {
+		...options,
+		template: {
+			...options?.template,
+			transformAssetUrls: false,
+		},
+	} satisfies VueOptions;
+
 	const config: UserConfig = {
 		optimizeDeps: {
 			include: ['@astrojs/vue/client.js', 'vue'],
 			exclude: ['@astrojs/vue/server.js', 'virtual:@astrojs/vue/app'],
 		},
-		plugins: [vue(options), virtualAppEntrypoint(options)],
+		plugins: [vue(vueOptions), virtualAppEntrypoint(vueOptions)],
 		ssr: {
 			external: ['@vue/server-renderer'],
 			noExternal: ['vuetify', 'vueperslides', 'primevue'],

packages/integrations/vue/test/basics.test.js

@@ -21,4 +21,13 @@ describe('Basics', () => {
 		assert.notEqual(bar, undefined);
 		assert.equal(bar.getAttribute('slot'), null);
 	});
+
+	it('Can show images from public', async () => {
+		const data = await fixture.readFile('/public/index.html');
+		const { document } = parseHTML(data);
+		const img = document.querySelector('img');
+
+		assert.notEqual(img, undefined);
+		assert.equal(img.getAttribute('src'), '/light_walrus.avif');
+	});
 });

packages/integrations/vue/test/fixtures/basics/src/components/Image.vue

@@ -0,0 +1,3 @@
+<template>
+	<img src="/light_walrus.avif" />
+</template>

packages/integrations/vue/test/fixtures/basics/src/pages/public.astro

@@ -0,0 +1,5 @@
+---
+import Image from "../components/Image.vue";
+---
+
+<Image />