3

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.

Michael Holland
  • 471
  • 3
  • 10

0 Answers0