vue-meta | Manage HTML metadata in Vuejs components with SSR support

As @deceze already pointed out in the comments, services that try fetching a title and description for a website only fetch the initial HTML and don't execute JavaScript during the process. The vue-meta package, however, sets the title and meta tags only when executing JavaScript.

Assuming you are using vue-cli, there should be a file public/index.html, that is served as the initial HTML when requesting your application. In that file, you can easily adjust the </code> tag and add some tags to the of the page.

You should store the router parameters in the router itself or in the URL, not the link. What you do is passing objects internally when you click the link, but as you noticed, when you click the browser refresh button these params are gone.

What happens is that Vue will load the app and router, identify what components are responsible for rendering the route and pass the detected parameters from your router to the components. Hence losing any additional data you had in your link before.

Try to keep only the dynamic params in your router and load the rest in the component, based on app logic. I.e. Assuming your route looks like /details/:id, you should initialize the SEO params in your details component.

Typically these come from the backend and for faster access I would transform the array to literal object and access the record by key. I.e. transform the array from:

metaManager is a MetaManager instance created from createMetaManager() of vue-meta.

Based on the Vue 3 + Vue Router example for vue-meta, here's an example usage:

After spending quite some time on this issue, the solution that worked for us was that "node-sass" was not yet compatible with node v16. Hence, after downgrading node version from v16 to v14, and downgrading npm from v7 to v6, it worked.

If you want to use responsive data in metaInfo, you'll need to assign the array to a data property and refer to it in the metaInfo function

It's a little tough to understand what is missing where. If you think that is just missing then please try adding css onto the HTML file from the cdn and check the working.

If you are not using Blade, or would prefer not to use the @routes directive, Ziggy provides an artisan command to output its config and routes to a file: php artisan ziggy:generate

As told here: https://github.com/MatteoGabriele/vue-analytics

his plugin will stop receiving feature requests. I will only spend time for important bug fixes. Google moved from analytics.js to its new gtag.js library and I've created a new plugin called vue-gtag. I suggest you to start using that one if you are about to create a new project.

You can see an example here: https://matteo-gabriele.gitbook.io/vue-gtag/#add-plugin-to-your-application

• vue-meta is only applied when your JavaScript is executed and your page is rendered. So, no you are not going to see those meta tags when you view page source.

• Do you need SSR or pre-rendering? Maybe. That depends on what you want to achieve. If having a great SEO until web crawlers support JS is crucial for your website? Then, yes.

Of course, you can still add some of the meta tags in the backend. Depending on the language/framework you use, there are plenty of options that can help to achieve that. For example, for Laravel you can check this package out.

Another workaround for this problem, is to categorize your requests into the ones coming from frontend and those coming from crawlers. You can do so by for example inspecting the user agent in the request, and then you could adjust the response for crawlers (like, injecting the meta tags into header) accordingly.

Here is an example of the workaround I suggested:

IndexController.php