Manage HTML metadata in Vue.js components with SSR support

Related tags

Vue.js metadata meta vue seo
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/vue-meta@1/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 vue-meta@next 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.js 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-info 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/veloce-starter-template-that-uses-vue--vite-typescript-ssr-pinia-vue-router-express-and-docker"><h6 class="font-weight-bold ">Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker</h6></a> <p class="mb-0 text-muted">Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib</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/8239700?v=4&s=40" alt="Alan Morel" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 10 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Oct 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/chendongming0602-vue3-0-ts-admin"><h6 class="font-weight-bold ">基于vue3.0-ts-Element集成的简洁/实用后台模板！《带预览地址》vue-admin；vue+admin；vue-element；vue+element；vue后台管理；vue3.0-admin；vue3.0-element。</h6></a> <p class="mb-0 text-muted">一、基于vue3.0+ts+Element通用后台admin模板 二、在线预览地址：http://admin.yknba.cn/ 三、下载使用： 1、克隆代码 通过git将代码克隆到本地；或者使用下载安装包模式进行下载。 2、进入目录 进入项目的根目录：vue3.0-ts-admin 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/52017518?v=4&s=40" alt="null" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 64 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 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/LuXDAmore-vue-cursor-fx"><h6 class="font-weight-bold ">Vue-cursor-fx - 🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible</h6></a> <p class="mb-0 text-muted">?? Vue Cursor Fx An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible Installation This package is a</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/3841171?v=4&s=40" alt="Luca Iaconelli" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 56 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Aug 18, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/a-tiny-ssrsafe-directive-for-binding-random-data-to-an-element"><h6 class="font-weight-bold ">A tiny, SSR-safe directive for binding random data to an element.</h6></a> <p class="mb-0 text-muted">1️⃣ vue-bind-once A tiny, SSR-safe directive for binding random data to an element. A tiny, SSR-safe directive for binding random data to an element. </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/28706372?v=4&s=40" alt="Daniel Roe" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 113 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 8, 2023 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/vue-ssr-prodready-multilanguages-template"><h6 class="font-weight-bold ">Vue3 SSR prod-ready multi-languages template</h6></a> <p class="mb-0 text-muted">vue3-ssr-template About This template is a prod ready starter for your Vue SSR application where you can do what you want at any level, client or serv</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/6469845?v=4&s=40" alt="null" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 9 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Mar 11, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/PanJiaChen-vue-element-admin-javascript-vuejs"><h6 class="font-weight-bold ">:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin</h6></a> <p class="mb-0 text-muted">English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter</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/8121621?v=4&s=40" alt="花裤衩" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 80.1k <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 31, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/akxcv-vuera-javascript-vuejs"><h6 class="font-weight-bold ">:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:</h6></a> <p class="mb-0 text-muted">vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My</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/17192674?v=4&s=40" alt="Aleksandr Komarov" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 4k <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 30, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/au1996-vue3-element-admin"><h6 class="font-weight-bold ">🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin</h6></a> <p class="mb-0 text-muted">vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案，它基于 vue3 和 element-plu</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/53331005?v=4&s=40" alt="雪月欧巴" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 84 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Nov 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/Jenesius-vue-modal"><h6 class="font-weight-bold ">Jenesius vue modal is simple library for Vue 3 only</h6></a> <p class="mb-0 text-muted">Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in 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/21982550?v=4&s=40" alt="Архипцев Евгений" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 63 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 30, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/marcduiker-staticwebapp-vue-vite"><h6 class="font-weight-bold ">A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.</h6></a> <p class="mb-0 text-muted">Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.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/4191277?v=4&s=40" alt="Marc Duiker" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 6 <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/szboynono-mosha-vue-toastify"><h6 class="font-weight-bold ">Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.</h6></a> <p class="mb-0 text-muted">Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap, </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/19368766?v=4&s=40" alt="Baidi Liu" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 187 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 2, 2023 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/hylurk-vue-cli-plugin-patch"><h6 class="font-weight-bold ">A plugin that can help you create project friendly with Vue for @vue/cli 4.5</h6></a> <p class="mb-0 text-muted">vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally</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/8414377?v=4&s=40" alt="null" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 2 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 6, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/riophae-vue-treeselect-javascript-vuejs"><h6 class="font-weight-bold ">A multi-select component with nested options support for Vue.js</h6></a> <p class="mb-0 text-muted">vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat</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/1289884?v=4&s=40" alt="Fangzhou Li" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 2.6k <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/dreamonkey-vue-auth0"><h6 class="font-weight-bold ">@auth0/auth0-spa-js wrapper in the "Vue way", with full TS support</h6></a> <p class="mb-0 text-muted">vue-auth0 This is a wrapper around @auth0/auth0-spa-js meant to ease the usage into Vue projects. This is heavily inspired by the snippet into Auth0 o</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/32733266?v=4&s=40" alt="Dreamonkey S.r.l." > <i class="fa fa-star ml-3" aria-hidden="true"></i> 5 <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Oct 18, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/storybookjs-storybook-javascript-vuejs"><h6 class="font-weight-bold ">📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!</h6></a> <p class="mb-0 text-muted">Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the</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/22632046?v=4&s=40" alt="Storybook" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 75.9k <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 9, 2023 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/airyland-vux-javascript-vuejs"><h6 class="font-weight-bold ">Mobile UI Components based on Vue & WeUI</h6></a> <p class="mb-0 text-muted">Be Cool with Vue@^2.3.0 and WeUI. Live Demo >> Sponsors 我们的产品 Requirements 暂未适配 vue-cli@3.x，请注意。 vue@^2.3.0(for .sync modifier) webpack@^2.0 node@^7.6</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/559179?v=4&s=40" alt="Airyland" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 17.6k <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/youzan-vant-javascript-vuejs"><h6 class="font-weight-bold ">Lightweight Mobile UI Components built on Vue</h6></a> <p class="mb-0 text-muted">Vant Mobile UI Components built on Vue ?? 文档网站（国内） ?? 文档网站（GitHub） ???? 中文版介绍 Features 65+ Reusable components 1kb Component average size (min+gzip) 9</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/11404085?v=4&s=40" alt="有赞" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 20.7k <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Dec 31, 2022 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/vueComponent-ant-design-vue-javascript-vuejs"><h6 class="font-weight-bold ">🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜</h6></a> <p class="mb-0 text-muted">Ant Design Vue An enterprise-class UI components based on Ant Design and Vue. English | 简体中文 Features An enterprise-class UI design system for desktop</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/32120805?v=4&s=40" alt="vueComponent" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 17.6k <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 9, 2023 </div> </div> <div class="box shadow-sm mb-3 rounded bg-white ads-box"> <div class="p-3 border-bottom"> <a href="/repo/buefy-buefy-javascript-vuejs"><h6 class="font-weight-bold ">Lightweight UI components for Vue.js based on Bulma</h6></a> <p class="mb-0 text-muted">Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design. Features Keep your current Bulma theme / va</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/26799900?v=4&s=40" alt="Buefy" > <i class="fa fa-star ml-3" aria-hidden="true"></i> 9.4k <i class="fa fa-clock-o ml-3" aria-hidden="true"></i> Jan 8, 2023 </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_jsrepos.png"> </a> </div> <p>2022.JsRepos </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>