How to add vuetify to default vuepress theme

Question

Is it possible to add vuetify to default vuepress theme ?

I just need to add few components to default theme however it would be nice to use the vuetify for handling for

Answer 1

The easiest way would be to use the vuetify CDN. In your config.js add something like

module.exports = {
  head: [
          ['link', { rel: 'stylesheet', href: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css` }],


    ['script', { src: `https://cdn.jsdelivr.net/npm/vue/dist/vue.js` }],
    ['script', { src: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js` }],
  ]
}

Something like that. See https://vuepress.vuejs.org/config/#head

Another way would be to install the vuetify package and add Vuetify to enhanceApp. It would look like this in your .vuepress/enhanceApp.js

import Vuetify from 'vuetify'

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
}) => {
    Vue.use(Vuetify)
}

See https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration