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 previous answer from oscarteg got me most of the way there. Here's what I had to do for the .vuepress/enhanceApp.js file (and yes, if you do not have one go ahead and create it).

import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
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);
  options.vuetify = new Vuetify({})
};

Note that in the new Vuetify({}) passed to options.vuetify you can set your theming.

See https://github.com/vuejs/vuepress/issues/681#issuecomment-515704018

Answer 2

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