Vuepress: [Question] Using third party UI frameworks to develop custom vuepress theme

[Sparkenstein]

Hi, Thanks for the awesome project you guy created. I am developing a custom theme and I want to use UI frameworks like vuetify/element-ui to develop the theme. But I could not get the theme to load into my Layout. The official documentation provides info about how to use an existing vuepress-theme-xxx theme from your docs. but it does not say anything about how to use components from these third-party frameworks. Here is my directory structure:

• .vuepress
  
  
  
  • theme
  
  
  • Layout.vue
  
  
  • config.js
  
  
• node_modules
  
  
  
  • vuetify
  
  
• first
  
  
  
  • README.md
  
  
• second
  
  
  
  • README.md
  
  
• README.md
• package.json

And then I am trying to write some vuetify code in Layout.vue like:

<v-card>
</v-card>

Thank you for your help.

[ulivz]

See: https://vuepress.vuejs.org/guide/custom-themes.html#app-level-enhancements.

An example to integrate element-ui:

// themeRootDir/enhanceApp.js.

import ElementUI from 'element-ui';
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(ElementUI);
}

[ghost]

To integrate Vuetify:

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.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);
}

See https://vuetifyjs.com/en/getting-started/quick-start#existing-applications

[NeroBlackstone]

To integrate Vuetify:

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.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);
}

See https://vuetifyjs.com/en/getting-started/quick-start#existing-applications

Hi, I want to insert Vuetify component to my Vuepress page.
Some components work as expected. Like Card.
But some component not. Like time picker.
Here is what time picker look like in vuepress page
Here is time picker component .vue file
Here is enhanceApp.js file
Could you please help me? Thx!

[NeroBlackstone]

OK, I made it!

enhanceApp.js

import Vuetify from "vuetify";
import 'vuetify/dist/vuetify.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

export default ({
    Vue, // VuePress 正在使用的 Vue 构造函数
    options, // 附加到根实例的一些选项
    router, // 当前应用的路由实例
    siteData, // 站点元数据
})=>{
    Vue.use(Vuetify);
    options.vuetify=new Vuetify({})
}