Component mounted but template tags not rendered in production environment (but rendered in development): Nuxtjs Vuejs Vuetifyjs Rollupjs

3
votes

Synonypsis

Please allow me to explain what is going on. I did the following:

  1. made custom Vue components using Vuetify components
  2. made a custom Vue component using these Vuetify components and the custom components from (1)
  3. used rollupjs to bundle these components together
  4. published these components on npm
  5. deployed to GitLab pages an example of the "main" component from (2), using the local version of the component (rather than the one from npm)
  6. made a new nuxt project
  7. dockerized it
  8. I install my package from (4) and use it
  9. deployed this test repository on GitLab pages

What happened that inspired this post: 1. On the component's repository GitLab page (step 5 from above), the component is both rendered and mounted 2. On the test repository GitLab page (step 9 from above), the component is mounted but the template is not rendered (e.g. it is like its template tag <my-component></my-component>) 3. In the test repository, using docker in development everything is ok 4. In the test repository the component is mounted but not rendered

Details

The offending component is called VRecordsTable from the package valpha. It is a wrapper of the Vuetify component VDataTable and adds custom slots, logic and a few other components. (links below).

The component is mounted in production (the data is there, reactive via vuex store also works), but the html is as follows:


<v-col><v-data-table page="0" items-per-page="5" items="record1,record2,record3,record4,record5,record6,record7,record8,record9" calculate-widths="true" fixed-header="" headers-length="7"></v-data-table></v-col>

Here is an image from the linked test repo below showing what I mean:

enter image description here

Notice, the component is mounted with data all there, but unlike all the other components, it doesn't have a drop down to see the internal components.

I'm not sure where I went wrong, at the bottom of this post is quick links to the repo of both the component and the test repo, in addition to useful files like rollup.config.js

Useful commands

For docker in the test repo please use:

# dev
docker-compose -f docker-compose.development.yml build
docker-compose -f docker-compose.development.yml up
docker-compose -f docker-compose.development.yml down

# prod
docker-compose -f docker-compose.production.yml build
docker-compose -f docker-compose.production.yml up
docker-compose -f docker-compose.production.yml down

Links

Hunchs

  • something with npm run start vs npm run dev / how nuxt is built is the issue?
  • something with how I configured rollup.config.js is the issue?
  • something with vuetify is the issue?
1
vuejs2vue-componentvuetify.jsnuxt.jsrollupjs

1 Answers

2
votes

https://github.com/vuetifyjs/vuetify-loader/issues/70

test-valpha is using vuetify-loader but valpha isn't, so the required vuetify components aren't automatically imported. Normally you'd get warnings about this but nuxt suppresses warnings in production mode and the @nuxtjs/vuetify module only uses vuetify-loader in production mode for some reason so everything seems to be working fine during development.

Some solutions are listed in the github issue:

  • Import the required components in valpha (see below) AND
  • Always use vuetify-loader by setting treeShake to true in test-valpha

OR

  • Don't use vuetify-loader in test-valpha (treeShake: false)

Importing components

If the library was using webpack you'd just have to install vuetify-loader, but there isn't anything similar for rollup so you need to add them manually as described in the documentation:

<template>
  <v-card>
    <v-card-title>...</v-card-title>
    <v-card-text>...</v-card-text>
  </v-card>
</template>

<script>
  import { VCard, VCardText, VCardTitle } from 'vuetify/lib'

  export default {
    components: {
      VCard,
      VCardText,
      VCardTitle,
    }
  }
</script>