v-text-field not converting to html after build

[KammerR]

After vuetify's last update, v-currency-field is not converting to html, for example a v-container, it becomes

, but v-currency-field is becoming <v -text-field ...>, as in screenshot.

Build with NuxtJs

[phiny1]

It's not seems to be a problem with v-currency-field and vuetify 2.1.7 (lasted version)

https://codepen.io/phiny1/pen/NWWrmma?editors=1111

It's seems a build problem... you should look at your build solution.

I dont know NuxtJs... so, i cant help you. Try build in webpack or vue-cli.

[KammerR]

Hello. I recently discovered that the error is caused by treeshake, which is enabled in build mode in vuetify. This then does not recognize the components within the imported component (v-currency-field). Could you give me a light in this case?

[phiny1]

Have you seen the link below?

https://vuetifyjs.com/en/customization/a-la-carte#custom-dynamic-imports

I think that you not importing v-text-field component to your project. Try import v-text-field globally or locally where you use v-currency-field.

Here a solution from vuetify link:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify, { VTextField } from 'vuetify/lib'

Vue.use(Vuetify, {
  components: { VTextField },
})

const opts = {}

export default new Vuetify(opts)

[KammerR]

So I tried to import VTextField locally and globally and both didn't work here for me = /. Vuetify is loaded by Nuxt, so in my code I only import the components, as below.

Locally, where I use v-currency-field

// ... componentes, include v-currency-field
<script>
import { VTextField, VIcon } from 'vuetify/lib'

export default {
  components: { VTextField, VIcon }
// ... Some code

Import v-currency field

import Vue from 'vue'
import currency from 'v-currency-field'

import 'v-currency-field/dist/index.css'

Vue.use(currency)

And i tried import components globally

import Vue from 'vue'
import { VTextField, VIcon } from 'vuetify/lib'

Vue.use({
  components: { VTextField, VIcon }
})

I made a repository to simulate this, to run it just give yarn install, yarn build and yarn start. Treeshake is disabled in the nuxt.config.js file at line 73, so you need to comment it to simulate the error if you want to observe what happens in my case =S.

https://github.com/KammerR/nuxtVcurrencyBuild

And thanks for answering me, it's pretty hard to find a solution / help even from the official vuetify and Nuxt media. =D

[phiny1]

Solution to work with those example code:

nuxt.config.js

• Import vCurrencyField plugin:

plugins: [ '~/plugins/social.js', '~/plugins/Vuetify.js', '~/plugins/currency.js', '~/plugins/vCurrencyField.js' ],

index.vue

• Uncomment the CardTest:

CardTest.vue

• Correct v-icon and v-btn components name:

network(network="twitter") v-btn.light-blue--text(small light text fab) v-icon(medium) | mdi mdi-twitter network(network="facebook") v-btn.blue--text.text--darken-4(small light text fab) v-icon(medium) | mdi mdi-facebook network(network="linkedin") v-btn.blue--text.text--darken-3(small light text fab) v-icon(medium) | mdi mdi-linkedin

Vuetify.js

• Import globaly the components that you will use:

import Vue from 'vue' import Vuetify, { VTextField, VIcon, VBtn } from 'vuetify/lib'

Vue.component('v-text-field', VTextField) Vue.component('v-icon', VIcon) Vue.component('v-btn', VBtn)

const opts = {} export default new Vuetify(opts)

[phiny1]

In my tests v-btn works on index.vue but dont work in CardTest.vue without import globaly... I think its because nuxt syntax with treeShake.

I've seen that you use vue-currency-input that is very nice... when i'll try change my component from v-money to vue-currency-input later.

[phiny1]

When you install component above, you are using Vuetify install that probabily overwrited by @nuxtjs/vuetify plugin that you use to import vuetify components to nuxt.

Vue.use(Vuetify, { components: { VTextField, VIcon, VBtn } })

In @nuxtjs/vuetify , the option treeShake accepts an Object... so I think that there are some way to specify the components there... but its a case for you study ;)

if (options.treeShake) { const VuetifyLoaderPlugin = this.nuxt.resolver.requireModule('vuetify-loader/lib/plugin')

this.options.build!.transpile!.push('vuetify/lib')

this.extendBuild((config) => {
  config.plugins!.push(new VuetifyLoaderPlugin(typeof options.treeShake === 'object' ? options.treeShake.loaderOptions : {}))
})

}