How to use it with Vuejs 3 + TypeScript ? #665

ayoubkhan558-zz · 2021-04-05T19:23:46Z

How to use it with Vuejs 3 + TypeScript ?

ayoubkhan558-zz · 2021-04-05T19:29:37Z

Argument of type 'typeof import("E:/Ayoub Khan/Porfolios/ayoubkhan-portfolio/node_modules/vue-meta/dist/vue-meta")' is not assignable to parameter of type 'Plugin_2'.
  Property 'install' is missing in type 'typeof import("E:/Ayoub Khan/Porfolios/ayoubkhan-portfolio/node_modules/vue-meta/dist/vue-meta")' but required in type '{ install: PluginInstallFunction; }'.ts(2345)

mixalbl4-127 · 2021-04-11T12:26:28Z

Make shure that you use vue-meta@3.0.0-alpha.4
main.ts

import { createMetaManager } from "vue-meta";
...
const metaManager = createMetaManager();

app.use(metaManager).mount("#app");

pimlie · 2021-04-11T12:27:52Z

Just added a types entry in package.json, that was missing in versions before alpha.4.

charles-allen · 2021-04-16T05:54:37Z

I needed to do 6 things:

Update vue-meta to v3 (in package.json)

- "vue-meta": "^2.4.0",
+ "vue-meta": "^3.0.0-alpha.4",

...or with yarn:

yarn add vue-meta@alpha

Add metaManager to Vue app

const app = createApp(App)
  .use(router)
  .use(store)
  .use(createMetaManager()) // add this line

await router.isReady()
app.mount('#app')

Add <metainfo> to App.vue <template> (this is also where I set a "title template")

<template>
  <metainfo>
    <template v-slot:title="{ content }">{{ content ? `${content} | SITE_NAME` : `SITE_NAME` }}</template>
  </metainfo>
  <header />
  <router-view />
  <footer />
</template>

Set default meta in App.vue <script>
Vue 3 vanilla:

export default {
  setup () {
    useMeta({
      title: '',
      htmlAttrs: { lang: 'en', amp: true }
    })
  }
}

or with vue-class-component:

export default class App extends Vue {
  meta = setup(() => useMeta({
    title: '',
    htmlAttrs: { lang: 'en', amp: true }
  })
}

Override meta in each component
Vue 3 vanilla:

export default {
  setup () {
    useMeta({ title: 'Some Page' })
  }
}

or with vue-class-component:

export default class SomePage extends Vue {
  meta = setup(() => useMeta({ title: 'Some Page' }))
}

~~Comment out the title in /public/index.html (see Issue #667)~~ Fixed in alpha.7

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
    ...
  </head>
  ...
</html>

@pimlie - Please correct me if I missed something or if a step is unnecessary!

pimlie · 2021-04-18T11:25:40Z

@charles-allen Thanks for the detailed log, this seems to be ok. Returning metadata: useActiveMeta shouldnt be strictly necessary though, in the examples its being returned to print the active meta state on the page as a stringified json object. But maybe you are using metadata yourself outside of the metainfo componnet?

charles-allen · 2021-04-19T07:24:33Z

Thanks for the feedback! I've updated my project & fixed the example above. I've also added a vanilla Vue 3 version for people not using vue-class-component :)

misterboe · 2021-05-06T17:33:39Z

Have a look at the docs on the new alpha tag > https://github.com/nuxt/vue-meta/tree/v3.0.0-alpha.5

Works out of the box.

Trinovantes · 2021-05-06T18:13:39Z

alpha.5 moved ssr functionality to a separate file but it's currently missing declarations dist/ssr/index.d.ts

ataylor32 · 2021-05-13T22:13:56Z

I'm working on a Vue 3 project that uses the options API with the help of defineComponent (in other words, this project does not use the composition API). I tried getting vue-meta v3.0.0-alpha.5 to work with this project, but the <title> wasn't reactive.

An example use case: let's suppose your route is /articles/some-article. Before the article is loaded, we only know the slug (some-article). Once it loads, we have all of the article's information, including its title. At that point, I would like the <title> to be set to the article's title. I haven't been able to get this working in my project and I'm wondering if it's because I'm not using the composition API.

charles-allen · 2021-06-01T13:25:00Z

@ataylor32 - I'm not using defineComponent, but I also had some issues with a dynamic title. For me, I think my mistake was not initializing my "article" field (leaving it as undefined); changing it to be initialized as null seems to have made the difference (presumably because that ensures it's reactive).

My code is using vue-class-component, but here's the relevant part anyway in case it triggers any other insights or useful discussion:

export default class Profile extends Vue.with(class {
  slug!: string
}) {
  user: User | null = null

  meta = setup(() => useMeta(computed(() => ({
    title: this.user?.name ?? 'Profile'
  }))))

  async mounted(): Promise<void> {
    this.user = (await db.collection(USERS).doc(this.slug).get()).data() as (User | undefined) ?? null
  }
}

Sirius-KiH · 2021-06-13T09:05:04Z

How would you use og or twitter meta tags with metaInfo?

<metainfo>
  <template v-slot:og:title="{ content }">{{ content }}</template>
</metainfo>

^^ This does not work.

Also, is there an elegant way to use the same value for multiple fields (like title, og:title and twitter:title)? Right now I would use something like this:

        useMeta({
                title: 'My title',
                "og:title": 'My title',
                "twitter:title": 'My title',
        });

pimlie · 2021-06-20T18:04:27Z

@Sirius-KiH With the default vue-meta configuration opengraph & twitter can be added by using nested objects.

description: description,
og: {
  description: ogDescription,
},
twitter: {
  description: twitterDescription,
}

then in the component you could do:

      <template v-slot:og(description)="{ content, metainfo }">{{ content || metainfo.description }}</template>
      <template v-slot:twitter(description)="{ content, metainfo }">{{ content || metainfo.description }}</template>

this way if ogDescription or twitterDescription are empty they will fallback to the default description

stale · 2021-07-21T04:05:30Z

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.

romain130492 · 2021-10-04T02:34:37Z

why Am i still getting that error...: Uncaught SyntaxError: The requested module '/node_modules/.vite/vue-meta.js?v=4865df67' does not provide an export named 'createMetaManager'?
I followed the exact steps from above

Vue3 project with no SSR and using Vite and using "vue-meta": "^3.0.0-alpha.4",

doutatsu · 2021-10-19T20:14:37Z

@romain130492 You need to update the version - alpha.9 is the latest and I think plugin was added in alpha.8

doutatsu · 2021-10-19T20:15:09Z

What is the latest update on the Vue 3 support? Documentation is very sparse, not quite sure how to migrate the old version to this one

stale · 2022-04-17T06:33:08Z

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.

tripflex · 2024-02-07T21:21:54Z

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/

stale bot added the stale label Jul 21, 2021

stale bot removed the stale label Oct 4, 2021

stale bot added the stale label Apr 17, 2022

stale bot closed this as completed Apr 27, 2022

Remzi1993 mentioned this issue Mar 20, 2023

Vue3+ts+vite - meta name doesn't seem to work #798

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use it with Vuejs 3 + TypeScript ? #665

How to use it with Vuejs 3 + TypeScript ? #665

ayoubkhan558-zz commented Apr 5, 2021

ayoubkhan558-zz commented Apr 5, 2021

mixalbl4-127 commented Apr 11, 2021 •

edited

Loading

pimlie commented Apr 11, 2021

charles-allen commented Apr 16, 2021 •

edited

Loading

pimlie commented Apr 18, 2021

charles-allen commented Apr 19, 2021

misterboe commented May 6, 2021

Trinovantes commented May 6, 2021

ataylor32 commented May 13, 2021 •

edited

Loading

charles-allen commented Jun 1, 2021

Sirius-KiH commented Jun 13, 2021

pimlie commented Jun 20, 2021

stale bot commented Jul 21, 2021

romain130492 commented Oct 4, 2021 •

edited

Loading

doutatsu commented Oct 19, 2021

doutatsu commented Oct 19, 2021

stale bot commented Apr 17, 2022

tripflex commented Feb 7, 2024

How to use it with Vuejs 3 + TypeScript ? #665

How to use it with Vuejs 3 + TypeScript ? #665

Comments

ayoubkhan558-zz commented Apr 5, 2021

ayoubkhan558-zz commented Apr 5, 2021

mixalbl4-127 commented Apr 11, 2021 • edited Loading

pimlie commented Apr 11, 2021

charles-allen commented Apr 16, 2021 • edited Loading

pimlie commented Apr 18, 2021

charles-allen commented Apr 19, 2021

misterboe commented May 6, 2021

Trinovantes commented May 6, 2021

ataylor32 commented May 13, 2021 • edited Loading

charles-allen commented Jun 1, 2021

Sirius-KiH commented Jun 13, 2021

pimlie commented Jun 20, 2021

stale bot commented Jul 21, 2021

romain130492 commented Oct 4, 2021 • edited Loading

doutatsu commented Oct 19, 2021

doutatsu commented Oct 19, 2021

stale bot commented Apr 17, 2022

tripflex commented Feb 7, 2024

mixalbl4-127 commented Apr 11, 2021 •

edited

Loading

charles-allen commented Apr 16, 2021 •

edited

Loading

ataylor32 commented May 13, 2021 •

edited

Loading

romain130492 commented Oct 4, 2021 •

edited

Loading