Using Vue Plugins

My favourite city is

Since Vuepress is built on Vue.js there are already a load of plugins you can use. You just need to make sure they are registered in .vuepress/enhanceApp.js.

Here's a simple example of how you would register the vue-typed-js plugin:

// .vuepress/enhanceApp.js
import VueTypedJs from 'vue-typed-js'

export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData // site metadata
}) => {
    if (typeof process === 'undefined') { // process is undefined in a browser         
        Vue.use(VueTypedJs)
    }
}

Here's the code showing how it is used in this page. Note that you don't need to import anything, you don't need to use any convoluted markdown, you just use it like the demos shown on the vue-typed-js readme.

<vue-typed-js :strings="items">
  <p>My favourite city is <span class="typing"></span></p>
</vue-typed-js>

<script>
export default {
  data () {
      return {
          items: [
            'Ealing',
            'Kilmarnock',
            'Newport',
            'Kensington',
            '...', 
            'Dagenham',
            'Liverpool',
            'Saint Helens',
            'Knowsley'
          ]
      }
  },
}
</script>