Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

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

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

* fix: oops merge correctly

* chore: changeset

* nit: address feedback
This commit is contained in:
Erika 2024-03-14 09:54:05 +01:00 committed by GitHub
parent 4e24628aac
commit ee07e62942
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 39 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/bright-needles-teach.md Normal file
View file

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

2
packages/integrations/vue/package.json
View file

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

12
packages/integrations/vue/src/index.ts
View file

@ -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'],

9
packages/integrations/vue/test/basics.test.js
View file

@ -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');
});
});

BIN
packages/integrations/vue/test/fixtures/basics/public/light_walrus.avif vendored Normal file
View file

Binary file not shown.

3
packages/integrations/vue/test/fixtures/basics/src/components/Image.vue vendored Normal file
View file

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

5
packages/integrations/vue/test/fixtures/basics/src/pages/public.astro vendored Normal file
View file

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

12
pnpm-lock.yaml
View file

@ -5119,8 +5119,8 @@ importers:
packages/integrations/vue:
dependencies:
'@vitejs/plugin-vue':
specifier: ^4.5.0
version: 4.6.2(vite@5.1.5)(vue@3.4.21)
specifier: ^5.0.4
version: 5.0.4(vite@5.1.5)(vue@3.4.21)
'@vitejs/plugin-vue-jsx':
specifier: ^3.1.0
version: 3.1.0(vite@5.1.5)(vue@3.4.21)
@ -8357,11 +8357,11 @@ packages:
- supports-color
dev: false
/@vitejs/plugin-vue@4.6.2(vite@5.1.5)(vue@3.4.21):
resolution: {integrity: sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==}
engines: {node: ^14.18.0 || >=16.0.0}
/@vitejs/plugin-vue@5.0.4(vite@5.1.5)(vue@3.4.21):
resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
engines: {node: ^18.0.0 || >=20.0.0}
peerDependencies:
vite: ^4.0.0 || ^5.0.0
vite: ^5.0.0
vue: ^3.2.25
peerDependenciesMeta:
vite: