I'm a bit stumped on how to get Vuetify fully working within a Vuepress component. I've got it sort of working but have run into a couple of roadblocks. Vuetify is installed in my Vuepress project and I've added a enhanceApp.js with the following:
import axios from 'axios'
import moment from 'moment'
import Vuetify from './node_modules/vuetify/dist/vuetify.min.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
}) => {
Vue.use(axios)
Vue.use(moment)
Vue.use(Vuetify)
}
Inside my component, I modified the mounted() method:
mounted () {
import('../node_modules/vuetify/dist/vuetify.min.js').then(module => {
// this.fetchHotels()
axios.get(this.apiLink + 'continents')
.then(response => {
this.continents = response.data
})
.catch(error => {
console.log(error)
})
})
}
This is as suggested on this page of the Vuepress docs: https://vuepress.vuejs.org/guide/using-vue.html#browser-api-access-restrictions
This is supposed to provide a work-around for when a component needs to access the DOM. However, while the layout portion of Vuetify is working as expected, the date-picker popup (one of the reasons I wanted to use Vuetify) doesn't display in the correct position and is not formatted as expected. The console displays the warning:
[Vuetify] Unable to locate target [data-app]
I'm assuming this is because the component is trying to access the DOM but can't. The above page sort of suggests this is an issue with the dev environment, but I can't get vuepress build to work. It keeps failing on the component.
Error rendering /indonesia/bali/hotels-resorts.html:
Error: render function or template not defined in component: HotelList
I've found a few other questions around this topic, but none of them seem to have been answered.