module.exports = {
  presets: [
    '@babel/preset-env',
    '@vue/cli-plugin-babel/preset'
and this lines to vue.config.js
module.exports = {
    transpileDependencies: [
        'vue-meta',
  raimondslindezutzu, marcoshmendes, noeGnh, luciorubeens, zlccns, simeon-petrov-5, gunydev, jjsebastianfuertes, benoitlahoz, neuminho, and 6 more reacted with thumbs up emoji
  zdimaz reacted with thumbs down emoji
  zlccns and jjsebastianfuertes reacted with hooray emoji
  abdurahmanrizal and jjsebastianfuertes reacted with heart emoji
    All reactions
          
The same. After adding vue-meta to transpileDependencies, the app was built successfully but the title does not change. Can anyone help?

[email protected]

[email protected]

Reproduction link https://github.com/baronkoko/vue-3-meta
  marcoshmendes, minterger, edunwa302, alaaels3id, and vm-raccoon reacted with hooray emoji
  BrayanCaro, minterger, amulo05, vm-raccoon, and Alonso-GarnierBBDO reacted with heart emoji
    All reactions
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
I change version [email protected] to [email protected], then working fine.
you just need to to transform it with Webpack/Babel as described in docs: https://github.com/nuxt/vue-meta/tree/next#ssr add to your babel.config.js this:
module.exports = {
  presets: [
    '@babel/preset-env',
    '@vue/cli-plugin-babel/preset'
and this lines to vue.config.js
module.exports = {
    transpileDependencies: [
        'vue-meta',
I had the exactly same issue with vue@^3.2.21 & [email protected] in a vue-cli app (no SSR).
Adding these two changes fixed my project
transpileDependencies: ['vue-meta'] to  vue.config.js
'@babel/preset-env' to babel.config.js (before I had only @vue/cli-plugin-babel/preset)
If I leave out the babel addition I get a new error (showing only as a reference)
in ./node_modules/vue-meta/dist/vue-meta.esm-browser.min.js
Module parse failed: Unexpected token (648:13)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     created() {
|       const e = o();
>       if (!e?.type || !(t.keyName in e.type)) return;
|       const r = e.type[t.keyName];
|       y(r) ? B(f(r)) : B(r);
 @ ./src/main.js 25:0-67 28:20-37 30:8-18
 @ multi (webpack)-dev-server/client?https://192.168.0.153:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
          
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 ✌️
useDefaultTItle.ts
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 };
App.vue

template:
    <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 title is a translated text by vue-i18n
          
If it helps anyone, I was having this exact same issue but only when running Storybook's build script (npm run build-storybook).
While running that script with vue-meta on v3.0.0-alpha.9, I kept having the following error:
ERR! => Failed to build the preview
ERR! ./node_modules/.pnpm/[email protected][email protected]/node_modules/vue-meta/dist/vue-meta.esm-browser.min.js 665:13
ERR! Module parse failed: Unexpected token (665:13)
ERR! File was processed with these loaders:
ERR!  * ./node_modules/.pnpm/[email protected]_ecbaa735a1342739b508fb94bc4fd047/node_modules/babel-loader/lib/index.js
ERR! You may need an additional loader to handle the result of these loaders.
ERR! |     created() {
ERR! |       const e = (0, _vue.getCurrentInstance)();
ERR! >       if (!e?.type || !(t.keyName in e.type)) return;
ERR! |       const r = e.type[t.keyName];
ERR! |       y(r) ? B((0, _vue.computed)(r)) : B(r);
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 .storybook/main.js the following code:
module.exports = {
  [...] // Along with other storybook configs
  webpackFinal: (config, { configType }) => {
    config.module.rules.push({
      test: /vue-meta\.esm-browser.min\.(js|jsx)$/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: [
            '@babel/preset-env',
            '@vue/cli-plugin-babel/preset'
    return config
          
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:
Verify that you can still reproduce the issue in the latest version of vue-meta
Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.
          
@jagoncalves14 thanks that helped (resolved compiler errors)! but i'm still getting an error regarding Proxy.
Uncaught TypeError: Cannot create proxy with a non-object as target or handler 
vue-meta.esm-browser.min.js:8
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.
you just need to to transform it with Webpack/Babel as described in docs: https://github.com/nuxt/vue-meta/tree/next#ssr add to your babel.config.js this:
module.exports = {
  presets: [
    '@babel/preset-env',
    '@vue/cli-plugin-babel/preset'
and this lines to vue.config.js
module.exports = {
    transpileDependencies: [
        'vue-meta',
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 useMeta in my component setup (yes I have followed the README on how to install vue-meta correctly in my main.js) I get this error in the console:
vue-meta.esm-bundler.js:841 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'resolve')
    at Object.resolve2 [as resolve] (vue-meta.esm-bundler.js:841:25)
    at recompute (vue-meta.esm-bundler.js:270:32)
    at compute (vue-meta.esm-bundler.js:430:27)
    at Object.addSource (vue-meta.esm-bundler.js:437:17)
    at MetaManager.addMeta (vue-meta.esm-bundler.js:753:34)
    at useMeta (vue-meta.esm-bundler.js:687:31)
    at setup (PaypalButton.vue:55:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7265:29)
    at setupComponent (runtime-core.esm-bundler.js:7220:11)
I'm using the latest vue-meta 3.0.0-alpha.2 with Vue 3 3.2.47
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.