-
Notifications
You must be signed in to change notification settings - Fork 248
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue-Meta not working on Vue 3 #692
Comments
i got same problem, please help |
Can you post the minimal reproduction? Either codesandbox or better yet, clonable repo would be great! |
same error here |
As requestes by @Penguinlay, please provide a minimal reproduction. I cannot repro this issue with eg this Vite example repo: https://github.com/pimlie/vue-meta-vite-example |
ERROR Failed to compile with 1 error 9:12:34 AM error in ./node_modules/vue-meta/dist/vue-meta.esm-browser.min.js Module parse failed: Unexpected token (798:10) npm v7.17.0 "dependencies": { We have a weird scenario where it fails on 1 PC and works on another... Tried everything - deleting node_modules, reinstalling, downgrading npm, downgrading vue-meta... Not sure how to reproduce... |
One way to find out where it went wrong is:
|
Most of the time, you should not need to change the versions to debug the issue. |
After reinstalling everything 10 times! I was unable to run the project w/o vue-meta, because it was cached and npm cache clean --force was unable to help... npm install --save vue-meta@^3.0.0-alpha.7 fixed the issue |
you just need to to transform it with Webpack/Babel as described in docs: https://github.com/nuxt/vue-meta/tree/next#ssr module.exports = {
presets: [
'@babel/preset-env',
'@vue/cli-plugin-babel/preset'
]
} and this lines to module.exports = {
transpileDependencies: [
'vue-meta',
],
} |
The same. After adding vue-meta to transpileDependencies, the app was built successfully but the title does not change. Can anyone help? |
@baronkoko Add |
@alimony Thank you very much, now it's working |
I change version vue-meta@3.0.0-alpha.9 to vue-meta@3.0.0-alpha.7, then working fine. |
I had the exactly same issue with vue@^3.2.21 & vue-meta@3.0.0-alpha.9 in a vue-cli app (no SSR). Adding these two changes fixed my project
If I leave out the babel addition I get a new error (showing only as a reference)
|
Hi, does it really helps you? |
Yeah, it does help me. Maybe you have a different setup
|
tried all these options, however unfortunately none of the suggestions worked for me. Since my case is only an SPA site (no SSR) only needed to change the title of the page, so ended up using the teleport component like somebody has suggested in another issue. If somebody would have the same issue as me here's my solution hope it helps somebody ✌️
import {
ref, watch, getCurrentInstance, nextTick,
} from 'vue';
export default () => {
const vm: any = getCurrentInstance()?.proxy;
const renderDefaultTitle = ref(false);
// * run when route changes
watch(() => vm.$route.name, () => {
// * wait the view component to render
nextTick(() => {
const titleArray = document.querySelectorAll('title');
if (titleArray.length > 1) {
for (const [i, titleNode] of titleArray.entries()) {
// * keep only the latest node
if (i < titleArray.length - 1) titleNode.remove();
}
}
renderDefaultTitle.value = !document.title;
});
}, { immediate: true });
return { renderDefaultTitle };
};
<teleport v-if="renderDefaultTitle" to="head">
<title>YOUR_DEFAULT_TITLE</title>
</teleport> in the options API: setup() {
const { renderDefaultTitle } = useDefaultTitle();
return { renderDefaultTitle };
}, and used the following in my layout templates: <teleport to="head">
<title>{{ title || 'default' }} - rest of the title</title>
</teleport> here |
If it helps anyone, I was having this exact same issue but only when running Storybook's build script ( While running that script with vue-meta on v3.0.0-alpha.9, I kept having the following error:
I also found out, based on the comments on this issue, that rolling back vue-meta to v3.0.0-alpha.7 was solving the issue. But I kept trying to make it work on the latest alpha version. The solution for me was adding to
|
jagoncalves14 Webpack starts ok with your config with vue-meta on v3.0.0-alpha.10, thanks. |
Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:
|
@jagoncalves14 thanks that helped (resolved compiler errors)! but i'm still getting an error regarding Proxy.
There are no compile errors. if there's anyone also trying to upgrade to vue 3 with minimal changes on webpack config (webpack v4), like me, would likely encounter this issue. |
How does one do this since Vue 3 uses Vite now? I've noticed there doesn't seem to be much chat about this issue in the last year or so, so potentially I'm doing something wrong but as soon as I call
I'm using the latest vue-meta Is anyone else experiencing this. It's the first time I've tried vue-meta with Vue 3 and I can't get it to work. |
For anybody showing up later searching, this project is no longer maintained ( #808 ) and suggest looking at using something like https://github.com/unjs/unhead/ |
After installing the vue-meta 3 alpha 8. I'm getting the error(see attached image).
./node_modules/vue-meta/dist/vue-meta.esm-browser.min.js 8:7170
Here is my main.js file configuration.
import { createMetaManager, plugin as metaPlugin } from 'vue-meta'
//...
const metaManager = createMetaManager()
const app = createApp(App)
.use(store)
.use(router)
.use(i18n)
.use(metaManager)
.use(metaPlugin) // optional, only needed for OptionsAPI (see below)
// .use(Meta)
ApiService.init(app)
globalComponents(app)
utils(app)
app.mount('#app')
The text was updated successfully, but these errors were encountered: