Manage HTML metadata in Vue.js components with SSR support

Overview

✌️ 🥉 Check the next branch for Vue3 support


vue-meta

Manage HTML metadata in Vue.js components with SSR support

npm downloads npm version Coverage Status Build Status dependencies Status Discord

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App',
      titleTemplate: '%s - Yay!',
      htmlAttrs: {
        lang: 'en',
        amp: true
      }
    }
  }
</script>
<html lang="en" amp>
<head>
  <title>My Example App - Yay!</title>
  ...
</head>

Introduction

Vue Meta is a Vue.js plugin that allows you to manage your app's metadata. It is inspired by and works similar as react-helmet for react. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the metaInfo property.

These properties, when set on a deeply nested component, will cleverly overwrite their parent components' metaInfo, thereby enabling custom info for each top-level view as well as coupling metadata directly to deeply nested subcomponents for more maintainable code.

Documentation

Please find the documention on https://vue-meta.nuxtjs.org

🌐 Please help us translate the documentation into your language, see here for more information

Examples

Looking for more examples what vue-meta can do for you? Have a look at the examples

Installation

Yarn
$ yarn add vue-meta
npm
$ npm install vue-meta --save
Download / CDN

Use the download links below - if you want a previous version, check the instructions at https://unpkg.com.

Latest version: https://unpkg.com/vue-meta/dist/vue-meta.min.js

Latest v1.x version: https://unpkg.com/[email protected]/dist/vue-meta.min.js

Uncompressed:

<script src="https://unpkg.com/vue-meta/dist/vue-meta.js"></script>

Minified:

<script src="https://unpkg.com/vue-meta/dist/vue-meta.min.js"></script>

Quick Usage

See the documentation for more information

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})

Frameworks using vue-meta

If you wish to create your app even more quickly, take a look at the following frameworks which use vue-meta

  • Nuxt.js - The Vue.js Progressive Framework
  • Gridsome - The Vue.js JAMstack Framework
  • Ream - Framework for building universal web app and static website in Vue.js
  • Vue-Storefront - PWA for eCommerce
  • Factor JS - Extension-first VueJS platform for front-end developers.

How to translate documentation

Thanks for your interest in translating the documentation. As our docs are based on VuePress, we recommend to have a look at their docs about internationalization as well

Here are the steps you will need to take:

  • Clone this repository
  • Create a new branch
  • Browse to /docs/
  • Create a folder with the language code you will add a translation for (eg /zh/)
  • Copy all *.md files and the folders api, faq, and guide to that folder
  • Translate the copied files in your language folder
  • Edit .vuepress/config.yml and add a config section for your locale in both locales as themeConfig.locales
  • Test your translation by running the docs dev server with yarn docs
  • Create a pull request with your changes
  • Receive eternal gratefulness from your fellow language speakers ❤️

Old versions

Click here if you are looking for the old v1 readme

License

MIT

Comments
  • Update rollup to the latest version 🚀

    Update rollup to the latest version 🚀

    Version 0.48.0 of rollup just got published.

    Dependency rollup
    Current Version 0.47.6
    Type devDependency

    The version 0.48.0 is not covered by your current version range.

    Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

    I recommend you look into these changes and try to get onto the latest version of rollup. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.


    Commits

    The new version differs by 8 commits.

    • 941b3a4 -> v0.48.0
    • 6fc2088 Merge pull request #1566 from rollup/gh-1479
    • 0eb4fc1 add various missing options
    • 30cd1ca various minor fixes
    • 313873b separate input options from output options internally, implement options.file and options.format
    • 36e4cb8 handle --amd.id and --amd.define
    • d1c4eb9 fix broken test
    • 31de491 normalise options

    See the full diff

    Not sure how things should work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Your Greenkeeper Bot :palm_tree:

    opened by greenkeeper[bot] 52
  • Help needed: How do I use this for facebook open graph meta.

    Help needed: How do I use this for facebook open graph meta.

    Currently I am trying :

    metaInfo() {
      return {
        title: 'Memes are the best',
        meta: [
          {vmid: 'og:description', property: 'og:description', name:'description', content: 'Wow'}
        ]
      }
    }
    

    But whenever I test it with fb open graph debugger it can't scrape the meta information.

    opened by jofftiquez 34
  • [v3] Cannot use library in a client-only app?

    [v3] Cannot use library in a client-only app?

    When I try to use [email protected] in a Vue 3 app without SSR (I’m using Vite), I get the following error:

    node_modules/vue-meta/dist/vue-meta.esm-bundler.js:850:35: error: Could not resolve "@vue/server-renderer"
    

    So I installed @vue/server-renderer thinking it would fix the issue, but then I get another error:

    Uncaught TypeError: vue.ssrUtils is null
    

    Am I doing something wrong or does the current version absolutely requires an SSR app to work properly?

    stale 
    opened by LeBenLeBen 33
  • title resolving after router's

    title resolving after router's "afterEach" hook, making analytics.js / gtag.js pageviews incorrect

    I'm trying to track page vues using gtag.js, and as a simple case, I just added the pageview in an afterEach hook of the router, but the title seems to be resolved later (I guess because of the batch update performed).

    This delay messes up pageview titles.

    Is there a way to know when the meta title is resolved?

    enhancement target: v2 
    opened by darkylmnx 25
  • Head script is added multiple times on navigation

    Head script is added multiple times on navigation

    I am opening a new issue, since https://github.com/nuxt/vue-meta/issues/381 is closed, but I am still finding that there is a problem.

    Nuxt version

    2.10.2

    Vue-meta version

    2.3.1

    Reproduction link

    https://github.com/simonbrent/nuxt-vue-meta-bug

    Steps to reproduce

    $ [email protected]:simonbrent/nuxt-vue-meta-bug.git
    $ cd nuxt-vue-meta-bug
    $ npm install
    $ npx nuxt
    
    • Open the site in Chrome, with dev tools open to the navigation tab
    • Click on the link to "foo" - see that "head-script.js" is downloaded
    • Click on the link to "index"
    • Click on the link to "foo" - see that "head-script.js" is downloaded again

    What is expected?

    "head-script.js" is downloaded once, the first time you navigate to /foo

    What is actually happening?

    "head-script.js" is downloaded every time you navigate to /foo

    question pending 
    opened by simonbrent 21
  • Typescript compiler fails when using metaInfo() function

    Typescript compiler fails when using metaInfo() function

    I would like to access component data from metaInfo() function, but typescript compiler throws me an error:

    export default Vue.extend({
      metaInfo() {
        return {
          title: this.name,
        };
      },
      data() {
        return {
          name: 'Bob',
          country: 'Sweden',
        };
      },
      methods: {
        sayHi() {
          console.log('Hi ' + this.name + ' from ' + this.country);
        },
      },
    });
    

    Property 'name' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.

    Property 'name' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.

    Property 'country' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.

    Notice that the compiler also outputs errors in the sayHi method. The errors only occurs when using this in the metaInfo() function

    question typescript 
    opened by nomadoda 21
  • Getting

    Getting "document is not defined" after upgrading to 0.5.6

    We've been using vue-meta with SSR on 0.5.5, but after upgrading to 0.5.6 we started getting the following errors on the server:

    ReferenceError: document is not defined
        at updateClientMetaInfo (/path/to/node_modules/vue-meta/lib/vue-meta.js:824:19)
        at Vue$2.refresh (/path/to/node_modules/vue-meta/lib/vue-meta.js:885:35)
        at /path/to/node_modules/vue-meta/lib/vue-meta.js:1013:74
        at Timeout._onTimeout (/path/to/node_modules/vue-meta/lib/vue-meta.js:924:5)
        at ontimeout (timers.js:365:14)
        at tryOnTimeout (timers.js:237:5)
        at Timer.listOnTimeout (timers.js:207:5)
    
    opened by goldfire 21
  • [Version `3.0.0-alpha.9`] Typescript Error 6053

    [Version `3.0.0-alpha.9`] Typescript Error 6053

    Typescript Error 6053

    node_modules/vue-meta/dist/vue-meta.d.ts:9:22 - error TS6053: File '/Users/shein/kk/gh/reproduction-vueMetaTypescriptError6053/node_modules/vue-meta/dist/ssr.d.ts' not found.
    
    9 /// <reference path="ssr.d.ts" />
                           ~~~~~~~~
    

    Issue

    https://github.com/nuxt/vue-meta/blob/eec4e7c7c00dfff74edd29675421052596bbada1/dist/vue-meta.d.ts#L9

    Minimal Reproduction

    https://github.com/Penguinlay/reproduction-vueMetaTypescriptError6053

    Additional Details

    Dependencies

    "dependencies": {
      "vue": "3.1.1",
      "vue-meta": "3.0.0-alpha.9"
    },
    "devDependencies": {
      "@vitejs/plugin-vue": "1.2.3",
      "@vue/compiler-sfc": "3.1.1",
      "typescript": "4.4.0-dev.20210617",
      "vite": "2.3.7",
      "vue-tsc": "0.1.7"
    }
    

    P.S.

    I have not tested it with Vue Meta versions other than 3.0.0-alpha.9 and dependencies' versions other than those listed above.

    opened by Penguinlay 20
  • Fix: 500 error using Vue+Meteor SSR after update `vue-meta` version to 2.3.4

    Fix: 500 error using Vue+Meteor SSR after update `vue-meta` version to 2.3.4

    Greetings, @pimlie

    This pull-request fixes the 500 error with document is not defined message when we using Vue Meta and Vue+Meteor SSR.

    Problem is the Vue+Meteor SSR package doesn't have this.$el on hook:beforeMount, so the getTag() function is called in { ssr: true } context.

    Bug was introduced in https://github.com/nuxt/vue-meta/pull/563.

    Best wishes, Sergey.

    stale 
    opened by mrauhu 18
  • Adding options `keyName`

    Adding options `keyName`

    Hi!

    I think it could be great to set the keyName as an option when installing vue-meta:

    import Meta from 'vue-meta'
    
    var options = {
      keyName: 'head'
    }
    Vue.use(Meta, options)
    

    So then, in my components, I can do:

    <script>
      export default {
        head: {
          title: 'My Example App',
          htmlAttrs: { lang: 'en' }
        }
      }
    </script>
    

    I want to implement it in nuxt.js as similar as in next.js, the component name is , so a key head seems the best name to making it similar (even if vue-meta can update more than inside the , which rocks 🚀 )

    I you like the idea, I can try to make a pull request?

    enhancement 
    opened by Atinux 18
  • Understanding Content Templates

    Understanding Content Templates

    I've been reading the docs and am struggling to understand how Content Templates work.

    My App.vue

    export default {
        metaInfo: {
            title: 'Home',
            titleTemplate: '%s - A Product Name',
            meta: [
                {
                    property: 'og:title',
                    content: 'Home',
                    template: chunk => `${chunk} - A Product Name`,
                    vmid: 'og:title'
                }
            ]
        }
    }
    

    And my About.vue

    export default {
        name: 'About Us',
        metaInfo: {
            title: 'About',
            meta: [
                {
                    property: 'og:title',
                    content: '%s - test'
                }
            ]
        }
    }
    

    If i overwrite the 'vmid' then I can't see to use %s to get the template from the parent

    How can I make it use the template from the App.vue for og:title? I've tried various vmid's such as ogTitle but none seem to work. The documentation seems very limited in explaining how to use content templates in child views, it would be great if there was an example of using Content Templates in child views alongside the setup as it shows currently.

    Thanks in advance for any tips on approaching this

    stale 
    opened by 1e4 16
  • Error in event handler for

    Error in event handler for "hook:mounted": "TypeError: Cannot create property 'initializing' on boolean 'true'"

    $root[rootConfigKey] is not an object when mounted with uni-app, because uni-app onLoad life cycle priority is higher

    So beforeCreate needs to be initialized once when mounting $root[rootConfigKey] = {}

    image
    opened by qq282126990 0
  • chore(deps): update devdependency babel-loader to v9

    chore(deps): update devdependency babel-loader to v9

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | babel-loader | ^8.1.0 -> ^9.1.0 | age | adoption | passing | confidence |


    Release Notes

    babel/babel-loader

    v9.1.0

    Compare Source

    New features

    Full Changelog: https://github.com/babel/babel-loader/compare/v9.0.1...v9.1.0

    v9.0.1

    Compare Source

    Bug Fixes

    Full Changelog: https://github.com/babel/babel-loader/compare/v9.0.0...v9.0.1

    v9.0.0

    Compare Source

    What's Changed

    New Contributors

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.5...v9.0.0

    v8.3.0

    Compare Source

    New features

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.5...v8.3.0

    v8.2.5

    Compare Source

    What's Changed

    New Contributors

    Full Changelog: https://github.com/babel/babel-loader/compare/v8.2.4...v8.2.5

    v8.2.4

    Compare Source

    What's Changed

    Thanks @​loveDstyle, @​stianjensen and @​pathmapper for your first PRs!

    v8.2.3: 8.2.3

    Compare Source

    This release fixes compatibility with Node.js 17

    Thanks @​Reptarsrage!

    v8.2.2

    Compare Source

    v8.2.1: 8.2.1

    Compare Source

    v8.2.0: 8.2.0

    Compare Source


    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update devdependency @nuxtjs/eslint-config to v12

    chore(deps): update devdependency @nuxtjs/eslint-config to v12

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @nuxtjs/eslint-config | ^3.0.0 -> ^12.0.0 | age | adoption | passing | confidence |


    Release Notes

    nuxt/eslint-config

    v12.0.0

    Compare Source

    Features

    v11.0.0

    Compare Source

    Bug Fixes

    v10.0.0

    Compare Source

    Bug Fixes
    Features
    BREAKING CHANGES
    • You have to manually add jest plugin and jest/globals to the env object in eslint config

    v9.0.0: @​nuxtjs/[email protected]

    Compare Source

    Major Dependencies
    Fixes

    v8.0.0: @​nuxtjs/[email protected]

    Compare Source

    Major Dependencies
    • chore(deps): update dependency eslint-plugin-vue to v8 (#​181
    • chore(deps): update dependency eslint-plugin-unicorn to v39 (#​184)
    Fixes

    v7.0.0: @​nuxtjs/[email protected]

    Compare Source

    Features
    • Support ESLint v8
    • Upgrade to eslint-plugin-jest v25
    • Upgrade to eslint-plugin-standard v5
    • Upgrade to eslint-plugin-unicorn v37
    BREAKING CHANGES
    • Drop Node 10

    v6.0.1

    Compare Source

    🐛 Bug Fixes

    chore: add eslint peer dependency (#​151) fix: turn off typescript 'no-undef' rule per docs (#​144)

    Dependencies

    chore(deps): update dependency eslint-plugin-promise to v5 (#​152)

    v6.0.0

    Compare Source

    v5.0.0

    Compare Source

    BREAKING CHANGE
    • Require eslint v7.13.0
    Dependencies
    • chore(deps): update dependency eslint-plugin-vue to v7 (#​122)
    • chore(deps): update all non-major dependencies (#​119)
    • chore(deps): update dependency eslint-config-standard to v16 (#​126)

    v4.0.0

    Compare Source

    Features

    • Update eslint-plugin-jest to v24
    • Update eslint-plugin-unicorn to v22

    v3.1.0

    Compare Source

    Features

    • Update eslint-plugin-unicorn to v21 (#​108)
    • Update eslint-plugin-import to v2.22.0 (#​97 )

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Vue3 + vue-router + vue-meta

    Vue3 + vue-router + vue-meta

    Hi,everyone I have a question that I want to combine meta with router in vue3; But I couldn't find the API;

    router.beforeEach((to, from, next) => {
      if (to.meta.metaInfo) {
        store.CAHNGE_META_INFO(to.meta.metaInfo.title);
        useMeta({
          title: to.meta.metaInfo.title,
        });
      }
      next();
    });
    

    The above code is not available. I was wondering when to insert meta information from the router into vue-meta.

    opened by fontcoderrrrrrr 0
  • open a beforeChange hook

    open a beforeChange hook

    A beforeChange hook would be super useful. Right now I'm using the following code in my app to set og and twitter meta properties equal to the title/description. Seems to work fine with the downside that it calls twice each update, as setting the data properties within the changed() function causes it to update again. If we had a beforeChange where we could manipulate info, it would be a lot cleaner. Thanks!

      metaInfo () {
        return {
          title: 'Home',
          titleTemplate: '%s | My App',
          meta: [
            { vmid: 'og:title', name: 'og:title', content: this.title },
            { vmid: 'twitter:title', name: 'twitter:title', content: this.title },
            { vmid: 'description', name: 'description', content: this.description },
            { vmid: 'og:description', name: 'og:description', content: this.description },
            { vmid: 'twitter:description', name: 'twitter:description', content: this.description }
          ],
          changed: (info) => {
            this.title = info.titleChunk
            this.description = info.description || 'some default description'
          }
        }
      },
      data () {
        return {
           this.title: '',
           this.description: ''
       },
    }
    

    and then in other components:

      metaInfo: {
        title: 'Page Title',
        description: 'page description.'
      },
    

    with a beforeChange hook I could do something like this instead, and it wouldn't render multiple times:

      metaInfo () {
        return {
          title: 'Home',
          titleTemplate: '%s | My App',
          beforeChange: (info) => {
            info.meta = [
              { vmid: 'og:title', name: 'og:title', content: info.title },
              { vmid: 'twitter:title', name: 'twitter:title', content: info.title },
              { vmid: 'description', name: 'description', content: info.description },
              { vmid: 'og:description', name: 'og:description', content: info.description },
              { vmid: 'twitter:description', name: 'twitter:description', content: info.description }
            ]
          }
        }
      },
    
    opened by amokrunner 0
Releases(v3.0.0-alpha.8)
  • v3.0.0-alpha.8(Jun 6, 2021)

  • v3.0.0-alpha.3(Apr 4, 2021)

  • v3.0.0-alpha.2(Feb 28, 2021)

    Changes

    • add support for computed metadata
    • add onRemoved guard
    • wait for component element to be removed from the DOM before removing metadata to prevent flash during page transitions

    uses a MutationObserver, might need a polyfill but afaik any browser supporting Proxy also supports MutationObserver

    • some code cleanup
    • show active metadata in vue-router example
    • improved styling a bit of vue-router example
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0-alpha.1(Jan 31, 2021)

  • v3.0.0-alpha.0(Jan 25, 2021)

    The first alpha release for vue-meta v3 supporting Vue 3, basic functionality should work but needs lots more testing. Don't use this in production. Help with squashing bugs would be appreciated.

    Quick overview of features

    useApi

    See ./examples/vue-router for a working example

    import { watch } from 'vue'
    import { useMeta, useMetainfo } from 'vue-meta'
    
    export default {
      setup () {
        // add meta info. The object passed into useMeta is configurable
        const { meta } = useMeta({
          title: 'My Title'
        })
    
        // get the currently used metainfo
        const metadata = useMetainfo()
    
        watch(metadata, (newValue) => {
          // metadata was updated, do something
        })
      }
    }
    

    SSR

    See ./examples/ssr for a working example

    import { createSSRApp } from 'vue'
    import { renderToStringWithMeta } from 'vue-meta'
    import { App, metaManager } from './App'
    
    export function renderPage() {
      const app = createSSRApp(App)
      app.use(metaManager)
    
      const [appHtml, ctx] = await renderToStringWithMeta(app)
    
      return `
      <html ${ctx.teleports.htmlAttrs || ''}>
        <head ${ctx.teleports.headAttrs || ''}>
         ${ctx.teleports.head || ''}
        </head>
        <body ${ctx.teleports.bodyAttrs || ''}>
          <div id="app">${appHtml}</div>
         ${ctx.teleports.body || ''}
        </body>
      </html>`
    

    Meta Resolvers

    needs more attention + real world testing

    In vue-meta v2 there was limited control on which metadata to show if you had multiple components returning the same information.

    In v3 we introduce meta resolvers, these are functions that should give you full control on which data to show when multiple options exist.

    See eg ./src/resolvers/deepest and ./examples/vue-router/main. The deepest resolver uses the data of the component with the highest depth (from the $root component). The resolver in the vue-router example just returns the data of the newest component (highest _uid).

    Metainfo Component

    Adding this component is currently required, but it will eventually be optional

    Add a Metainfo component in your app to extend the used metadata using slots.

      <div class="my-layout">
        <metainfo>
          <!-- // content contains the value active value for base from `useMetainfo` -->
          <template v-slot:base="{ content, metainfo }">http://nuxt.dev:3000{{ content }}</template>
          <template v-slot:title="{ content, metainfo }">
            {{ content }} - {{ metainfo.description }} - Add the description to the title
          </template>
        </metainfo>
      </div>
    

    Known Issues

    • Metainfo component has to be present otherwise client side updates wont work
    • The error Uncaught ReferenceError: body is not defined is logged in the browser Solution: Add a body slot to your metainfo component with an empty tag: <metainfo><template v-slot:body><span/></template></metainfo>
    • Types are wrong (still pointing to v2 types)
    Source code(tar.gz)
    Source code(zip)
  • v2.4.0(Jun 10, 2020)

  • v2.3.4(May 26, 2020)

  • v2.3.3(Feb 26, 2020)

  • v2.3.2(Jan 12, 2020)

    Fixes

    • fix: call afterNavigation after nextTick (#478) (Ricardo Gobbo de Souza) (fa12530)

    Documentation

    • docs: add missing comma in API docs (#483) (John Franey) (5e581ae)
    • docs: adds documentation for json option (#482) (Marcel Pfeifer) (0145166)
    • docs: fix properties typo (#489) (Nikita) (12645a9)
    • docs: fix typo (#473) (Denis) (c6b20eb)
    Source code(tar.gz)
    Source code(zip)
  • v2.3.1(Oct 9, 2019)

  • v2.3.0(Oct 8, 2019)

    Highlights

    Adding additional meta info

    Example of adding additional meta info for eg a third party plugin:

    const { set, remove } = app.$meta().addApp('custom')
    
    set({
      meta: [{ charset: 'utf=8' }]
    })
    
    setTimeout(() => remove(), 3000)
    

    There is no reactivity for custom apps. You need to take care of that and call set and remove when apropiate. If you call addApp.set on the client before the app is mounted, the tags will be processed on the first refresh. If you call set when the app is mounted they tags are immediately processed.

    The function is called addApp because the added metaInfo is treated exactly the same as when there are multiple apps on one page. Eg the tags that will be added will also list the appId you specifiy:

    <meta data-vue-meta="custom" charset="utf-8">
    

    New SSR injector helpers

    So templates can be a little less verbose:

    Old: https://github.com/nuxt/vue-meta/blob/fc71e1f1c4ca27e2eaf99e288c005976d492c004/examples/ssr/app.template.html New: https://github.com/nuxt/vue-meta/blob/master/examples/ssr/app.template.html

    Add line break (SSR only)

    Pass either a boolean true to inject().head(true), inject().bodyPrepend(true) or inject().bodyAppend(true) to insert a linebreak after all tags.

    If you want to keep using the old syntax, pass a prop ln: true as arg: meta.script.text({ body: true, ln: true })

    Support setting attributes from multiple apps

    The behaviour that vue-meta always adds data- attributes to track attributes on the client side has been changed. Instead of a data attribute we keep a local attributeMap object in the attribute updater which also adds support for updating attributes from multiple apps. To track this data from a ssr page, the data- tag is still added but with a JSON encoded map.

    For example

    // data
    metaInfo = {
      bodyAttr: { foo: 'bar', fizz: ['fuzz', 'fozz'] }
    }
    
    // ssr tag
    <body foo="bar" fizz="fuzz fozz" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D,%22fizz%22:%7B%22ssr%22:%5B%22fuzz%22,%22fozz%22%5D%7D%7D">
    
    // tag after hydration
    <body foo="bar" fizz="fuzz fozz">
    
    // attribute map (values listed per app id)
    { bodyAttrs: {
      foo: { ssr: 'bar' },
      fizz: { ssr: ['fuzz', 'fozz'] }
    }}
    

    Change plugin options during runtime

    Some plugin options can be changed during runtime by calling app.$meta().setOptions(). Besides the two new options below you can also use enable refreshOnceOnNavigation this way (its not possible to disable refreshOnceOnNavigation)

    New option debounceWait

    You can now configure for how long vue-meta debounces meta updates. The default value is 10ms.

    This option can be set during runtime:

    // debounce meta updates for 50ms 
    app.$meta().setOptions({ debounceWait: 50 })
    

    New option waitOnDestroyed

    Once a component is destroyed, vue-meta will update the meta information to make sure any info added by the destroyed component is removed. Default value is true

    Previously this always set an interval of 50ms to make sure to wait until the element had been removed (due to transitions). If you set waitOnDestroyed: false then the destroyed update will always be called in the nextTick instead.

    Note that destroyed updates are also debounced with other lifecycle hook updates

    This option can be set during runtime:

    app.$meta().setOptions({ waitOnDestroyed: false })
    

    Changelog

    Features

    • feat: add options debounceWait (d43b77c)
    • feat: add option waitOnDestroyed (f745059)
    • feat: add possibility to add additional meta info (0ab76ee)
    • feat: add support for setting attributes from multiple apps (d9b0ab2)
    • feat: enable setting refreshOnceOnNavigation during runtime (9d14387)

    Fixes

    • fix: use computed prop (which uses caching) instead of calling the fn directly (c344d60)

    Refactors

    • refactor: destroyed never runs on server anyway (631cc9c)
    • refactor: minimize function calls / use of bind (0e49a9c)
    • refactor: prefer functions over closures for hooks (54ea6c6)
    • refactor: small bundle size improvements (9eba2b5)

    Documentation

    • docs: add Factor to frameworks (#459) (Andrew Powers) (da0ba13)
    • docs: Use direct link to Nuxt documentation (#446) (novellac) (20ac995)

    Chore

    • chore: add missing (c1b01b9)
    • chore: dist size improvements (ee12bfc)
    • chore: fix lint (b73b8ed)
    • chore: lint & fix test (ae98f65)
    • chore: prevent enhancements to go stale (f1ed379)
    • chore: strip bundles deepmerge even more (398d1af)
    • chore: stripped deepmerge a bit too much (695159f)
    • chore: update dependencies (47a1dde)

    Tests

    • test: add tests for new functionalities (a2f0e7d)
    • test: build ssr fixture in test so we can collect coverage (dcdd47a)

    Miscellaneous

    • example: cleartimeout in ssr example (9225d5e)
    • example: update dependencies (1854018)
    Source code(tar.gz)
    Source code(zip)
  • v2.2.2(Aug 30, 2019)

    This release provides a workaround for a memory leak that was present in vue-meta. We recommend everybody to upgrade as soon as possible.

    Bug Fixes

    • workaround for memoryleak in destroyed hook (ec7b1fb)
    • types: add json property (#439) (96a14f7284495d6a175ebc1f42e5ca6151ad4917)
    • types: add "content" property to MetaPropertyEquiv and remove "name" (#436) (4384f44)
    • types: export metaInfo types directly from index (#441) (dc305440c438d76fe2533eff7cf9772213542121)

    Thanks to

    • @SilentDepth
    • @tsulala-asagiri
    • @rchl
    Source code(tar.gz)
    Source code(zip)
  • v2.2.1(Aug 30, 2019)

  • v2.2.0(Aug 4, 2019)

  • v2.1.1(Jul 27, 2019)

  • v2.1.0(Jul 24, 2019)

    The v2.1 release adds new features which where originally mostly postponed for v3, but have been brought forward due to various reasons.

    As the docs have been updated to reflect the new features, we will link to the docs if you wish more detials:

    Features

    • add option for prepending (no)script to body (#410) (05163a7)
    • auto add ssrAttribute to htmlAttrs (9cf6d32)
    • enable onload callbacks (#414) (fc71e1f)
    • make ssr app id configurable (b0c85e5)
    • support json content (without disabling sanitizers) (#415) (51fe6ea)

    Bug Fixes

    • also use ssrAppId for client update (50c0509)
    • don't generate tag if metaInfo.title is null or false (<a href="https://github.com/nuxt/vue-meta/issues/409">#409</a>) (<a href="https://github.com/nuxt/vue-meta/commit/39ef287">39ef287</a>)</li> <li>dont update title on client with falsy value except empty string (<a href="https://github.com/nuxt/vue-meta/commit/6efcdf1">6efcdf1</a>)</li> </ul> <h2>Thanks to</h2> <ul> <li>dgtlmoon (@dgtlmoon)</li> <li>Louis-Marie Michelin (@lmichelin)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.1.0">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.1.0">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v2.0.5(Jul 24, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <h2>Bug Fixes</h2> <ul> <li>add warning for v1 boolean attribute syntax (<a href="https://github.com/nuxt/vue-meta/commit/bfeab17">bfeab17</a>)</li> <li>dont change title when value is undefined (fix <a href="https://github.com/nuxt/vue-meta/issues/396">#396</a>) (<a href="https://github.com/nuxt/vue-meta/commit/90f9710">90f9710</a>)</li> <li>ensure hasAttribute exists on $root.$el (<a href="https://github.com/nuxt/vue-meta/commit/f1511ac">f1511ac</a>)</li> <li>only show boolean attrs with truthy value (<a href="https://github.com/nuxt/vue-meta/commit/1d9072a">1d9072a</a>)</li> </ul> <h2>Tests</h2> <ul> <li>enable all getMetaInfo tests again (<a href="https://github.com/nuxt/vue-meta/commit/24d7fee">24d7fee</a>)</li> </ul> <h2>Thanks to</h2> <ul> <li>Seth Fitzsimmons (@mojodna)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.0.5">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.0.5">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v2.0.4(Jun 22, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <h2>Bug Fixes</h2> <ul> <li>add warning for v1 boolean attribute syntax (<a href="https://github.com/nuxt/vue-meta/commit/bfeab17">bfeab17</a>)</li> <li>dont change title when value is undefined (fix <a href="https://github.com/nuxt/vue-meta/issues/396">#396</a>) (<a href="https://github.com/nuxt/vue-meta/commit/90f9710">90f9710</a>)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.0.4">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.0.4">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v2.0.3(Jun 22, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <h2>Bug Fixes</h2> <ul> <li>$meta can be called server side before app is initiated (<a href="https://github.com/nuxt/vue-meta/commit/ecd725d">ecd725d</a>)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.0.3">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.0.3">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v2.0.2(Jun 10, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <h3>Bug Fixes</h3> <ul> <li>correctly transpile builds (eg ie compatibility) (<a href="https://github.com/nuxt/vue-meta/commit/6751d24">6751d24</a>)</li> <li>use simple polyfilled includes method (<a href="https://github.com/nuxt/vue-meta/commit/623970d">623970d</a>)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.0.2">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.0.2">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v2.0.1(Jun 9, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <p>In some circumstances (mostly ssr) the VueMeta plugin could be installed twice, make sure to prevent that</p> <h2>Bug fixes</h2> <ul> <li>allow _hasMetaInfo to be configurable (<a href="https://github.com/nuxt/vue-meta/commit/8b7b991">8b7b991</a>)</li> <li>prevent vue-meta plugin to be installed twice (<a href="https://github.com/nuxt/vue-meta/commit/094fd9d">094fd9d</a>)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.0.1">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.0.1">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v2.0.0(Jun 9, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <p>:ribbon: We are delighted to officially release Vue-Meta v2.0!</p> <h2>Breaking Change</h2> <ul> <li>The behaviour of keys with <code>undefined</code> as value has changed: <ul> <li>In <code>v1</code> an <code>undefined</code> value would be rendered as a boolean attribute, but as boolean attributes are actually part of e.g. the html5 specifications this functionality has been removed</li> <li>In <code>v2</code> an <code>undefined</code> value can be used to render child properties conditionally.</li> </ul> </li> </ul> <p>See the docs for more information about <a href="https://vue-meta.nuxtjs.org/guide/special.html#boolean-attributes">boolean attribute handling</a> and how to use <a href="https://vue-meta.nuxtjs.org/guide/special.html#remove-parent-property-by-child">child properties conditionally</a></p> <h2>Noteworthy Changes</h2> <ul> <li>We now have a separate documentation website! https://vue-meta.nuxtjs.org</li> <li>The global mixin which vue-meta uses now only injects a <code>beforeCreate</code> lifecycle hook. Other lifecycle hooks will only be added when a component has a metaInfo property defined</li> <li>When retrieving and merging the metaInfo in your app, component branches without any component which defines metaInfo are skipped</li> <li>A <a href="https://vue-meta.nuxtjs.org/api/#refreshonceonnavigation"><code>refreshOnceOnNavigation</code></a> option has been added which uses <code>vue-router</code> navigation guards to only trigger meta updates once after navigation. Also check the <a href="https://vue-meta.nuxtjs.org/api/#afternavigation"><code>afterNavigation</code></a> callback which can be used to run some script that relies on update metadata (e.g. page tracking)</li> <li>You have more control on which value is used when a <em>parent</em> and <em>child</em> define the same <code>vmid</code>. See the docs on <a href="https://vue-meta.nuxtjs.org/guide/special.html">special cases</a> for more information</li> <li>Basic support has been added for using multiple Vue apps or off-document components on a page, currently the following is supported: <ul> <li>adding/removing tags (without a <code>vmid</code>) is fully supported</li> <li>there is partial support for using <code>vmid</code> across apps: <ul> <li>an app can override a previous set tag with the same <code>vmid</code> from another app</li> <li>if you remove a <code>vmid</code> in app 2 then vue-meta wont automatically load the corresponding <code>vmid</code> from app 1</li> </ul> </li> <li>applying attributes are not supported across apps, its recommended to only have one app which adds attributes to a tag <ul> <li>you could eg have one app to add html attributes, one to add head and one to add bod but you cant have two apps which both add html attributes as the second app will fully overwrite the attributes of the first app</li> </ul> </li> </ul> </li> </ul> <h2>Migration Guide</h2> <ol> <li>Update your vue-meta version (tip: use <a href="https://www.npmjs.com/package/npm-check-updates">ncu</a>)</li> <li>Run <code>npm install</code> or <code>yarn install</code></li> <li>Change the boolean attributes you use within your app to have a different value than <code>undefined</code></li> <li>Profit!</li> </ol> <h2>Features</h2> <ul> <li>add afterNavigation callback (<a href="https://github.com/nuxt/vue-meta/commit/97badf6">97badf6</a>)</li> <li>add amp as boolean attribute (<a href="https://github.com/nuxt/vue-meta/commit/b7ee040">b7ee040</a>)</li> <li>add browser build without ssr code (<a href="https://github.com/nuxt/vue-meta/commit/2862a5b">2862a5b</a>)</li> <li>add esm builds (<a href="https://github.com/nuxt/vue-meta/commit/56f0b61">56f0b61</a>)</li> <li>add getOptions method (<a href="https://github.com/nuxt/vue-meta/commit/31e975d">31e975d</a>)</li> <li>add option to refresh once during navigation (<a href="https://github.com/nuxt/vue-meta/commit/8e21175">8e21175</a>)</li> <li>add pause/resume methods to pause updates (<a href="https://github.com/nuxt/vue-meta/commit/d237180">d237180</a>)</li> <li>attr keys can have array values (<a href="https://github.com/nuxt/vue-meta/commit/01edc8c">01edc8c</a>)</li> <li>child can indicate its content should be ignored (<a href="https://github.com/nuxt/vue-meta/commit/22e456c">22e456c</a>)</li> <li>child can indicate parent vmid to be removed (<a href="https://github.com/nuxt/vue-meta/commit/915fedf">915fedf</a>)</li> <li>export hasMetaInfo helper function (<a href="https://github.com/nuxt/vue-meta/commit/173b31d">173b31d</a>)</li> <li>major refactor, cleanup and jest tests (<a href="https://github.com/nuxt/vue-meta/commit/5d64d43">5d64d43</a>)</li> <li>render boolean attributes correctly (<a href="https://github.com/nuxt/vue-meta/commit/deea5cf">deea5cf</a>)</li> <li>track branches which contain metaInfo components (<a href="https://github.com/nuxt/vue-meta/commit/f2e8eb5">f2e8eb5</a>)</li> <li>use named exports to export helper functions (<a href="https://github.com/nuxt/vue-meta/commit/95c3b7d">95c3b7d</a>)</li> <li>add basic support for multiple apps on one page (<a href="https://github.com/nuxt/vue-meta/commit/024e7c5">024e7c5</a>)</li> <li><strong>ts:</strong> update types for v2 (<a href="https://github.com/nuxt/vue-meta/commit/7b85ff2">7b85ff2</a>)</li> <li><strong>ts</strong>: add microdata meta tag type (<a href="https://github.com/nuxt/vue-meta/commit/11c8138">11c8138</a>)</li> </ul> <h2>Bug Fixes</h2> <ul> <li>add afterNavigation type (<a href="https://github.com/nuxt/vue-meta/commit/722786d">722786d</a>)</li> <li>add inject stub for browser build (<a href="https://github.com/nuxt/vue-meta/commit/02e4094">02e4094</a>)</li> <li>add ts type for refresh once (<a href="https://github.com/nuxt/vue-meta/commit/5935cf3">5935cf3</a>)</li> <li>dont call changed with explicit this (<a href="https://github.com/nuxt/vue-meta/commit/5ad6711">5ad6711</a>)</li> <li>dont inline typeof definitions (<a href="https://github.com/nuxt/vue-meta/commit/5031acf">5031acf</a>)</li> <li>implement simply array polyfills (<a href="https://github.com/nuxt/vue-meta/commit/d38f81e">d38f81e</a>)</li> <li>rollup paths (<a href="https://github.com/nuxt/vue-meta/commit/bfbd181">bfbd181</a>)</li> <li>trigger meta refresh on page load (<a href="https://github.com/nuxt/vue-meta/commit/b824a27">b824a27</a>)</li> <li>move addNavGuards check to mounted hook (<a href="https://github.com/nuxt/vue-meta/commit/e80643b">e80643b</a>)</li> <li>use timers instead of requestAnimationFrame (<a href="https://github.com/nuxt/vue-meta/commit/c040de7">c040de7</a>)</li> </ul> <h2>Thanks to</h2> <ul> <li>George Boot (@georgeboot)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.0.0">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.0.0">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v2.0.0-rc.2(Jun 6, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <p>This release candidate adds basic support for using multiple Vue apps or off-document components on a page.</p> <p>Currently the following is supported:</p> <ul> <li>adding/removing tags (without a <code>vmid</code>) is fully supported</li> <li>there is partial support for using <code>vmid</code> across apps: <ul> <li>app 2 can override a tag with the same <code>vmid</code> from app 1 (vice versa is not possible)</li> <li>if you remove a <code>vmid</code> in app 2 then vue-meta wont automatically load the corresponding <code>vmid</code> from app 1</li> </ul> </li> <li>applying attributes are not supported across apps, its recommended to only have one app which adds attributes to a tag <ul> <li>you could eg have one app to add html attributes, one to add head and one to add bod but you cant have two apps which both add html attributes as the second app will fully overwrite the attributes of the first app</li> </ul> </li> </ul> <h2>Features</h2> <ul> <li>add basic support for multiple apps on one page (024e7c5)</li> </ul> <h2>Bug Fixes</h2> <ul> <li>detect and apply changes triggered before or during initialization (34c6ad9)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.0.0-rc.2">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.0.0-rc.2">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v2.0.0-rc.1(Apr 23, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <p>The second Release Candidate fixes an issue introduced by the first RC and a long-standing issue when opening a page in a not-visible tab</p> <h2>Bug Fixes</h2> <ul> <li>move addNavGuards check to mounted hook (<a href="https://github.com/nuxt/vue-meta/commit/e80643b">e80643b</a>)</li> <li>use timers instead of requestAnimationFrame (<a href="https://github.com/nuxt/vue-meta/commit/c040de7">c040de7</a>)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.0.0-rc.1">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.0.0-rc.1">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v2.0.0-rc.0(Apr 20, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <p>After a long wait here it is, the first Release Candidate for vue-meta v2.0 which should resolve most outstanding issues. As <code>v2</code> is mostly a refactor of <code>v1</code>, there are not many breaking changes and we expect to release <code>v2</code> soon</p> <h2>Breaking Change</h2> <ul> <li>The behaviour of keys with <code>undefined</code> as value has changed: <ul> <li>In <code>v1</code> it would be rendered as a boolean attribute, but as boolean attributes are actually part of e.g. the html5 specifications this functionality has been removed</li> <li>In <code>v2</code> it can be used to render child properties conditionally.</li> </ul> </li> </ul> <p>See the docs for more information about <a href="https://vue-meta.nuxtjs.org/guide/special.html#boolean-attributes">boolean attribute handling</a> and how to use <a href="https://vue-meta.nuxtjs.org/guide/special.html#remove-parent-property-by-child">child properties conditionally</a></p> <h2>Noteworthy Changes</h2> <ul> <li>We now have a separate documentation website! https://vue-meta.nuxtjs.org</li> <li>The global mixin which vue-meta uses now only injects a <code>beforeCreate</code> lifecycle hook. Other lifecycle hooks will only be added when a component has a metaInfo property defined</li> <li>When retrieving and merging the metaInfo in your app, component branches without any component which defines metaInfo are skipped</li> <li>A <a href="https://vue-meta.nuxtjs.org/api/#refreshonceonnavigation"><code>refreshOnceOnNavigation</code></a> option has been added which uses <code>vue-router</code> navigation guards to only trigger meta updates once after navigation. Also check the <a href="https://vue-meta.nuxtjs.org/api/#afternavigation"><code>afterNavigation</code></a> callback which can be used to run some script that relies on update metadata (e.g. page tracking)</li> <li>You have more control on which value is used when a <em>parent</em> and <em>child</em> define the same <code>vmid</code>. See the docs on <a href="https://vue-meta.nuxtjs.org/guide/special.html">special cases</a> for more information</li> </ul> <h2>Migration Guide</h2> <p>If you want to help us test this release candidate, please follow these steps:</p> <ol> <li> <p>Manually update your vue-meta version</p> <ol> <li>E.g. update your package.json to read <code>"vue-meta": "2.0.0-rc.0"</code> (or use the <code>next</code> tag):</li> <li>Run <code>npm install</code> or <code>yarn install</code></li> </ol> </li> <li> <p>Change the boolean attributes you use to have a different value than <code>undefined</code></p> </li> <li> <p>Test and please report any issues you experience!</p> </li> </ol> <h2>Features</h2> <ul> <li>add afterNavigation callback (<a href="https://github.com/nuxt/vue-meta/commit/97badf6">97badf6</a>)</li> <li>add amp as boolean attribute (<a href="https://github.com/nuxt/vue-meta/commit/b7ee040">b7ee040</a>)</li> <li>add browser build without ssr code (<a href="https://github.com/nuxt/vue-meta/commit/2862a5b">2862a5b</a>)</li> <li>add es build (<a href="https://github.com/nuxt/vue-meta/commit/56f0b61">56f0b61</a>)</li> <li>add getOptions method (<a href="https://github.com/nuxt/vue-meta/commit/31e975d">31e975d</a>)</li> <li>add option to refresh once during navigation (<a href="https://github.com/nuxt/vue-meta/commit/8e21175">8e21175</a>)</li> <li>add pause/resume methods to pause updates (<a href="https://github.com/nuxt/vue-meta/commit/d237180">d237180</a>)</li> <li>attr keys can have array values (<a href="https://github.com/nuxt/vue-meta/commit/01edc8c">01edc8c</a>)</li> <li>child can indicate its content should be ignored (<a href="https://github.com/nuxt/vue-meta/commit/22e456c">22e456c</a>)</li> <li>child can indicate parent vmid to be removed (<a href="https://github.com/nuxt/vue-meta/commit/915fedf">915fedf</a>)</li> <li>export hasMetaInfo helper function (<a href="https://github.com/nuxt/vue-meta/commit/173b31d">173b31d</a>)</li> <li>major refactor, cleanup and jest tests (<a href="https://github.com/nuxt/vue-meta/commit/5d64d43">5d64d43</a>)</li> <li><strong>ts:</strong> update types for v2 (<a href="https://github.com/nuxt/vue-meta/commit/7b85ff2">7b85ff2</a>)</li> <li>render boolean attributes correctly (<a href="https://github.com/nuxt/vue-meta/commit/deea5cf">deea5cf</a>)</li> <li>track branches which contain metaInfo components (<a href="https://github.com/nuxt/vue-meta/commit/f2e8eb5">f2e8eb5</a>)</li> <li>use named exports to export helper functions (<a href="https://github.com/nuxt/vue-meta/commit/95c3b7d">95c3b7d</a>)</li> </ul> <h2>Bug Fixes</h2> <ul> <li>add afterNavigation type (<a href="https://github.com/nuxt/vue-meta/commit/722786d">722786d</a>)</li> <li>add inject stub for browser build (<a href="https://github.com/nuxt/vue-meta/commit/02e4094">02e4094</a>)</li> <li>add ts type for refresh once (<a href="https://github.com/nuxt/vue-meta/commit/5935cf3">5935cf3</a>)</li> <li>dont call changed with explicit this (<a href="https://github.com/nuxt/vue-meta/commit/5ad6711">5ad6711</a>)</li> <li>dont inline typeof definitions (<a href="https://github.com/nuxt/vue-meta/commit/5031acf">5031acf</a>)</li> <li>implement simply array polyfills (<a href="https://github.com/nuxt/vue-meta/commit/d38f81e">d38f81e</a>)</li> <li>rollup paths (<a href="https://github.com/nuxt/vue-meta/commit/bfbd181">bfbd181</a>)</li> <li>trigger meta refresh on page load (<a href="https://github.com/nuxt/vue-meta/commit/b824a27">b824a27</a>)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v2.0.0-rc.0">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v2.0.0-rc.0">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v1.6.0(Mar 28, 2019) </h4> <div class="review-description"> <article class="markdown-body"> <h2>Patches</h2> <ul> <li>ci: add .circleci (pooya parsa) (6f60512)</li> <li>docs: add tips about inline script in README.md <code>script</code> example (#304) (William Chong) (bf7035b)</li> <li>docs: fix CI link (Alexander Lichter) (2742965)</li> <li>feat: don't generate title tag if title is empty (#334) (Xin Du (Clark)) (2141bab)</li> <li>fix: follow html specs with regards to end tags (#314) (Pim) (a21037f)</li> <li>fix: $meta is not defined in Vue interface type (#312) (Nicolas Igot) (9dfb001)</li> <li>fix: type annotation for script tag (#305) (Taku Fukada) (f79f5b3)</li> <li>:ship: CDN update (Sébastien Chopin) (f626a42)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v1.6.0">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v1.6.0">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v1.5.8(Dec 18, 2018) </h4> <div class="review-description"> <article class="markdown-body"> <h2>Patches</h2> <ul> <li>fix: replace lodash.uniqby with internal fn #298 by @manniL</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v1.5.8">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v1.5.8">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v1.5.7(Dec 18, 2018) </h4> <div class="review-description"> <article class="markdown-body"> <h2>Patches</h2> <ul> <li>Deduplicate meta objects by VMID #282 by @manniL</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v1.5.7">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v1.5.7">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v1.5.6(Nov 26, 2018) </h4> <div class="review-description"> <article class="markdown-body"> <h2>Fixes</h2> <ul> <li>Dependencies upgrade for audit fix, also upgraded to Webpack 4 & Babel 7</li> <li>fix(pkg): remove extra yarn.lock from npm package (#287)</li> <li>Bail on empty objects sent to the tagGenerator function (#286)</li> <li>Fix empty string is undefined #52 (#274)</li> </ul> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v1.5.6">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v1.5.6">Source code(zip)</a><br> </article> </div> </div> </div> </li> <li> <div class="d-flex"> <div class="right"> <h4> v1.5.5(Sep 29, 2018) </h4> <div class="review-description"> <article class="markdown-body"> <h1>Fix</h1> <p>Revert "feat: merge mixins options" #273</p> <i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/tarball/v1.5.5">Source code(tar.gz)</a><br><i class="fa fa-file-code-o m-r-xs" aria-hidden="true"></i><a href="https://api.github.com/repos/nuxt/vue-meta/zipball/v1.5.5">Source code(zip)</a><br> </article> </div> </div> </div> </li> </ul> </div> </div> </div> </div> <div class="col-lg-4 right"> <div id="basic" class="tab-pane fade show active"> <div class="box shadow-sm rounded bg-white mb-3"> <div class="box-title border-bottom p-3"> <h6 class="m-0">Owner </h6> </div> <div class="d-flex align-items-center p-3 job-item-header"> <div class="overflow-hidden mr-2"> <h6 class="font-weight-bold -dark mb-0 text-truncate"> Nuxt </h6> <div class="small text-gray-500"> The Intuitive Vue Framework </div> </div> <img class="img-fluid ml-auto" style="border-radius: 50%;" src="https://avatars.githubusercontent.com/u/23360933?v=4&s=60" alt="Nuxt"> </div> <div class="box-body p-3"> <a href="https://github.com/nuxt/vue-meta" rel="nofollow" target="_blank" class="btn btn-lg btn-block btn-success mb-3"><i class="fa fa-github" aria-hidden="true"></i> GitHub </a> <a href="https://vue-meta.nuxtjs.org" rel="nofollow" target="_blank" class="btn btn-lg btn-block btn-dark mb-3"><i class="fa fa-home" aria-hidden="true"></i> https://vue-meta.nuxtjs.org</a> </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/VeryWow-vue-simple-headful-vuejs-meta-tags"><h6 class="font-weight-bold ">Easily set meta-tags with vue.js - a `vue-headful` alternative</h6></a> <p class="mb-0 text-muted">vue-simple-headful A simple ts-friendly meta-tag manager for Vue.js This is a direct and fully reworked fork of vue-headful. It is meant to make headf</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/26734308?v=4&s=40" alt="Very Wow" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 17 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 5, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/troxler-vue-headful-vuejs-meta-tags"><h6 class="font-weight-bold "> Set document title and meta tags with Vue.js</h6></a> <p class="mb-0 text-muted">vue-headful vue-headful allows to set the title and several meta tags of your document from any Vue.js view. vue-headful is a tiny wrapper around Head</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/2767948?v=4&s=40" alt="null" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 227 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Sep 2, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/prabhuignoto-smart-tagz"><h6 class="font-weight-bold ">🏷Smart input tags for Vue</h6></a> <p class="mb-0 text-muted">✨ Features ⚡ Autosuggest with support for keyboard selection. ✏️ Edit the tags inline by double clicking them. ??️ Paste strings with delimiters of yo</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/2144065?v=4&s=40" alt="Prabhu Murthy" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 45 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Nov 24, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/beaubus-simple-tags-for-vue"><h6 class="font-weight-bold ">Simple tags management with suggestions for Vue.js 3</h6></a> <p class="mb-0 text-muted">Simple tags component for Vue.js 3 Attach or detach tags with suggestions. Styled with tailwindcss by default. Demo Installation NPM npm i simple-tags</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/74729287?v=4&s=40" alt="Andrew" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 1 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 16, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/nuxt-vue-meta-vuejs-meta-tags"><h6 class="font-weight-bold ">Manage HTML metadata in Vue.js components with SSR support</h6></a> <p class="mb-0 text-muted">✌️ ?? Check the next branch for Vue3 support Manage HTML metadata in Vue.js components with SSR support <template> ... </template> <script> expor</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/23360933?v=4&s=40" alt="Nuxt" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 4k <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 5, 2023 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/fupdec-mediaChips-vuejs-audio-video"><h6 class="font-weight-bold ">Manage your videos, add any metadata to them and play them.</h6></a> <p class="mb-0 text-muted">Manage your videos, add any metadata to them and play them.</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/74197516?v=4&s=40" alt="null" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 91 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 17, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/Sitronik-v-paginator-vuejs-page-navigation"><h6 class="font-weight-bold ">Simple page-by-page navigation for Vue.js based on your html templates with ssr support</h6></a> <p class="mb-0 text-muted">Simple page-by-page navigation for Vue.js based on your html templates with ssr support</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/7203872?v=4&s=40" alt="Denis" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 2 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jun 3, 2021 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/manatlan-vbuild-vuejs-integrations"><h6 class="font-weight-bold ">"Compile" your VueJS components (sfc/*.vue) to standalone html/js/css ... python only (no need of nodejs). Support python components too !</h6></a> <p class="mb-0 text-muted">vbuild "Compile" your VueJS components (*.vue) to standalone html/js/css ... python only, no need of nodejs. And you can use python components with vb</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/150722?v=4&s=40" alt="null" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 241 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 12, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/kadiryazici-vite-ssr-vue3-example"><h6 class="font-weight-bold ">An Example SSR App for Vue3 with Vite-SSR</h6></a> <p class="mb-0 text-muted">Vue 3 + Vite-SSR Example App SSR To start dev server run npm run dev or yarn/pnpm dev To build app run npm run build or yarn/pnpm build To start produ</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/47540799?v=4&s=40" alt="Kadir Yazıcı" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 35 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 25, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/kadiryazici-vite-ssr-vue3-example-vuejs-examples"><h6 class="font-weight-bold ">An Example SSR App for Vue3 with Vite-SSR</h6></a> <p class="mb-0 text-muted">An Example SSR App for Vue3 with Vite-SSR</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/47540799?v=4&s=40" alt="Kadir Yazıcı" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 35 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 25, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/wjq990112-nestjs-ssr"><h6 class="font-weight-bold ">Nestjs-ssr - A template using NestJS for both SSR and RESTful API based on Vite</h6></a> <p class="mb-0 text-muted">A progressive Node.js framework for building efficient and scalable server-side </p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/45777252?v=4&s=40" alt="炽翎" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 40 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 29, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/gisnode-gnss-exifr"><h6 class="font-weight-bold ">Javascript Frontend (Vue + Electron) for Exiv2 - C++ Image Metadata Library</h6></a> <p class="mb-0 text-muted">GNSS EXIFR Add (or) Replace GeoTag Information from CSV to JPEG (or) JPG Drone Imageries (embedded into EXIF). Remove GeoTag Information from Drone Im</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/65563317?v=4&s=40" alt="null" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 1 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jun 25, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/deepjyoti30-ytmdl-web-v2"><h6 class="font-weight-bold ">Web version of ytmdl. Allows downloading songs with metadata embedded from various sources like itunes, gaana, LastFM etc.</h6></a> <p class="mb-0 text-muted">Ytmdl Web V2 Version 2 of Ytmdl Web with a lot of fixes since the first iteration. This release is way faster than the previous version along with som</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/33604454?v=4&s=40" alt="Deepjyoti Barman" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 741 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 1, 2023 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/FraunhoferISST-diva"><h6 class="font-weight-bold ">Scalable data management system with an AI powered profiling and metadata enrichment</h6></a> <p class="mb-0 text-muted">DIVA - Data Inventory and Valuation Approach An awesome data catalog application Developed for evaluating the newest data management technologies in c</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/13035047?v=4&s=40" alt="Fraunhofer ISST" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 16 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jun 7, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/OSGeo-mdme"><h6 class="font-weight-bold ">App to fetch metadata from a dataset and complete the annotations in a basic web form</h6></a> <p class="mb-0 text-muted">mdme [model-driven-metadata-editor] App to fetch metadata from a dataset and complete the annotations in a basic web form. The editor supports multipl</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/1058467?v=4&s=40" alt="Open Source Geospatial Foundation" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 2 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Oct 3, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/new-fantastic-vue-wp-json"><h6 class="font-weight-bold ">WordPress module for Vue.js, PWA ready, with full support for Vuex Store, Vue Router, Vue SSR and Nuxt.js.</h6></a> <p class="mb-0 text-muted">WordPress module for Vue.js, PWA ready, with full support for Vuex Store, Vue Router, Vue SSR and Nuxt.js.</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/51117022?v=4&s=40" alt="Vue WordPress" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 26 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Apr 9, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/fuxingloh-vue-masonry-wall-vuejs-ui-layout"><h6 class="font-weight-bold ">A pure vue responsive masonry layout without direct dom manipulation and ssr support.</h6></a> <p class="mb-0 text-muted">vue-masonry-wall A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this becaus</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/4266087?v=4&s=40" alt="Fuxing Loh" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 185 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 4, 2023 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/avil13-vue-sweetalert2-vuejs-tooltip"><h6 class="font-weight-bold ">Vue.js wrapper for SweetAlert2. With support SSR.</h6></a> <p class="mb-0 text-muted">A convenient wrapper for sweetalert2.</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/1606172?v=4&s=40" alt="Aleksey Pivkin" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 584 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 28, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/DerYeger-vue-masonry-wall-vuejs-ui-layout"><h6 class="font-weight-bold ">Responsive masonry layout with SSR support and zero dependencies for Vue 3.</h6></a> <p class="mb-0 text-muted">Responsive masonry layout with SSR support and zero dependencies for Vue 3.</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/7950094?v=4&s=40" alt="Jan Müller" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 0 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Nov 27, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/MiKr13-vue-horizontal-list-autoscroll"><h6 class="font-weight-bold ">A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll</h6></a> <p class="mb-0 text-muted">A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll</p> </div> <div class="p-2"> <img class="lazy img-fluid mr-3" style="border-radius: 50%;max-width: 15%" data-original="https://avatars.githubusercontent.com/u/34394719?v=4&s=40" alt="Mihir Kumar" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 5 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> May 14, 2022 </div> </div> </div> </div> </div> </div> <!-- footer --> <footer class="bg-white"> <div class="container"> <div class="copyright"> <div class="logo"> <a href="/"> <img src="/assets/images/logo_bestofvue.png"> </a> </div> <p>2022.BestofVue </p> </div> </div> </footer> <!-- footer--> <!-- Bootstrap core JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha512-Oy5BruJdE3gP9+LMJ11kC5nErkh3p4Y0GawT1Jrcez4RTDxODf3M/KP3pEsgeOYxWejqy2SPnj+QMpgtvhDciQ==" crossorigin="anonymous"></script> <!-- select2 Js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous"></script> <!-- Custom --> <script src="/assets/js/custom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> <script> $(function() { $("img.lazy").lazyload({ threshold :180, failurelimit :20, effect : "fadeIn" }); }); </script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script> <script> hljs.initHighlightingOnLoad(); </script> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>