You can see that the app renders Vuetify components correctly on the CSB.
If you git clone from the GitHub repository and run yarn dev (MINIMAL=1 CSB=1 nuxt), it also works fine.
However, if you run yarn build && yarn start (nuxt build && nuxt start) or yarn generate (nuxt generate) in the repository, Vuetify components are not rendered correctly as shown below.
Expected behavior
Vuetify components should be rendered correctly when an app is written in JSX and built for production.
Screenshots
When built for development (can be seen on the CSB):
Module version
Describe the bug If I use JSX, Vuetify components are rendered correctly only when an app is built for development.
To Reproduce
You can see that the app renders Vuetify components correctly on the CSB. If you
git clone
from the GitHub repository and runyarn dev
(MINIMAL=1 CSB=1 nuxt
), it also works fine. However, if you runyarn build && yarn start
(nuxt build && nuxt start
) oryarn generate
(nuxt generate
) in the repository, Vuetify components are not rendered correctly as shown below.Expected behavior Vuetify components should be rendered correctly when an app is written in JSX and built for production.
Screenshots When built for development (can be seen on the CSB):
When built for production:
Additional context I confirmed that I can fix the problem by creating
plugins/vuetify.js
, writingVue.use(Vuetify)
there, and registering it as a plugin innuxt.config.js
(see https://github.com/kimamula/nuxt-vuetify-jsx/commit/8cb92c7d7410bfc48e1c043282ae52c9038a4933). However, I am not sure whether this is the right way to fix the problem.