vuetify-module
vuetify-module copied to clipboard
nuxt-community
Plz support nuxt brigde .
Context: https://github.com/nuxt/framework/discussions/751#discussioncomment-1465718
doesn't work in both nuxt-bridge or nuxt 3.
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
The Nuxt 3 support is one of the most important things for the community right now. To accelerate the adaptation of Vue3/Nuxt3/Composition API/Vuetify3, we should make this the top1 priority.
@kevinmarrec @pi0 Is there a chance to estimate the delivery time of this feature? For many of us, this is a serious blocker for migrating/experimenting with the new framework, as a consequence a potential early adopters wait in starting blocks instead of becoming QA and improving the code.
Hey @pich
Thank you for your message, we are doing our best to update each module, but in the meantime you can always set up Vuetify without using the module, like a normal Vue plugin. Have you tried this?
Hey @pich
Thank you for your message, we are doing our best to update each module, but in the meantime you can always set up Vuetify without using the module, like a normal Vue plugin. Have you tried this?
I didn't know about that/haven't try. I'll check it right away, thanks for the hint @Atinux .
Hey @pich
Thank you for your message, we are doing our best to update each module, but in the meantime you can always set up Vuetify without using the module, like a normal Vue plugin. Have you tried this?
I didn't know about that/haven't try. I'll check it right away, thanks for the hint @Atinux .
If you can get it to working update us please
Since I need just a PoC, I've simplified the approach and ended up with a no-brainer CDN version. xD
Hey @pich Thank you for your message, we are doing our best to update each module, but in the meantime you can always set up Vuetify without using the module, like a normal Vue plugin. Have you tried this?
I didn't know about that/haven't try. I'll check it right away, thanks for the hint @Atinux .
If you can get it to working update us please
I haven't tried this myself yet, but I came across this solution: https://github.com/nuxt/framework/discussions/1183#discussioncomment-1539889
That nuxt/framework#1183 comment doesn't work for me, results in the error below.
Uncaught TypeError: Cannot read properties of undefined (reading 'DEBUG')
at globals.ts:3:48
(anonymous) @ globals.ts:3
The following worked for me in order to get Nuxt Bridge to work with Vuetify, the Vuetify Loader, and changing Vuetify scss variables.
{
"dependencies": {
"nuxt-edge": "latest"
},
"devDependencies": {
"@nuxt/bridge": "npm:@nuxt/bridge-edge",
"@vue/runtime-dom": "3.2.22",
"deepmerge": "4.2.2",
"fibers": "5.0.0",
"sass": "1.32.13",
"sass-loader": "10.2.0",
"vuetify": "2.5.6",
"vuetify-loader": "1.7.2"
}
}
// plugins/vuetify.ts
import Vuetify from 'vuetify/lib';
import { defineNuxtPlugin } from '#app';
export default defineNuxtPlugin(nuxtApp => {
const vuetify = new Vuetify({
theme: {
dark: true
}
});
nuxtApp.provide('vuetify', vuetify.framework);
});
// nuxt.config.ts
import { defineNuxtConfig } from "@nuxt/bridge";
import { VuetifyLoaderPlugin } from "vuetify-loader";
export default defineNuxtConfig({
head: {
link: [
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Khand:wght@700&family=Roboto:wght@400;500;700;900",
},
{
rel: "stylesheet",
href: "https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css",
},
],
},
plugins: ["~/plugins/vuetify"],
build: {
transpile: ["vuetify/lib"],
plugins: [new VuetifyLoaderPlugin()],
loaders: {
sass: {
// @ts-ignore
additionalData: "@import '@/assets/styles/vuetify.scss'",
},
},
},
});
// assets/styles/vuetify.scss
$font-size-root: 20px;
The following worked for me in order to get Nuxt Bridge to work with Vuetify, the Vuetify Loader, and changing Vuetify scss variables.
I'm trying to migrate a default nuxt2+vuetify to nuxt-bridge, nothing extra added as I'm really new to all this, and I believe I incorporated your code: https://github.com/amery/nuxt-bridge-vuetify/commit/8070d4f122e46a6b8f296d89ff48de56eda3bb7a
but it explodes with the following and I have no idea what it means, wip branch if you want to give it a try. any suggestions would be greatly appreciated, I'm lost.
start Building server... 03:27:06
ERROR Rollup error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) 03:27:10
FATAL Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) 03:27:10
at error (node_modules/rollup/dist/es/shared/rollup.js:10332:30)
at Module.error (node_modules/rollup/dist/es/shared/rollup.js:12251:16)
at Module.tryParse (node_modules/rollup/dist/es/shared/rollup.js:12654:25)
at Module.setSource (node_modules/rollup/dist/es/shared/rollup.js:12557:24)
at ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/rollup.js:22021:20)
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────╯
ERROR Command failed with exit code 1: npx nuxt generate 03:27:10
at makeError (node_modules/nuxi/dist/chunks/generate.mjs:1106:11)
at handlePromise (node_modules/nuxi/dist/chunks/generate.mjs:1670:26)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Object.invoke (node_modules/nuxi/dist/chunks/generate.mjs:1731:7)
at async _main (node_modules/nuxi/dist/chunks/index.mjs:386:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command
Good afternoon,
I recently have been looking at Nuxt for Server Side Rendered applications and use Vuetify for my enterprise applications. I would like to use the Vite features of the bridge version, but neither this package works nor side-loading Vuetify 2 as a plugin. Has anyone run into this or have a workaround using Vite as the engine?
Thanks for all you do!
Hi
I'm also trying to migrate my project with Nuxt2 + Vuetify to Nuxt-Bridge by setting json below.
But I can't start with errors.
Is there guys suceeded to migarate vuetify on nuxt-bridge ?
The following worked for me in order to get Nuxt Bridge to work with Vuetify, the Vuetify Loader, and changing Vuetify scss variables.
I'm trying to migrate a default nuxt2+vuetify to nuxt-bridge, nothing extra added as I'm really new to all this, and I believe I incorporated your code: amery/nuxt-bridge-vuetify@8070d4f
but it explodes with the following and I have no idea what it means,
wipbranch if you want to give it a try. any suggestions would be greatly appreciated, I'm lost.start Building server... 03:27:06 ERROR Rollup error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) 03:27:10 FATAL Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) 03:27:10 at error (node_modules/rollup/dist/es/shared/rollup.js:10332:30) at Module.error (node_modules/rollup/dist/es/shared/rollup.js:12251:16) at Module.tryParse (node_modules/rollup/dist/es/shared/rollup.js:12654:25) at Module.setSource (node_modules/rollup/dist/es/shared/rollup.js:12557:24) at ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/rollup.js:22021:20) ╭──────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ │ ✖ Nuxt Fatal Error │ │ │ │ Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) │ │ │ ╰──────────────────────────────────────────────────────────────────────────────────────────────────────────╯ ERROR Command failed with exit code 1: npx nuxt generate 03:27:10 at makeError (node_modules/nuxi/dist/chunks/generate.mjs:1106:11) at handlePromise (node_modules/nuxi/dist/chunks/generate.mjs:1670:26) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Object.invoke (node_modules/nuxi/dist/chunks/generate.mjs:1731:7) at async _main (node_modules/nuxi/dist/chunks/index.mjs:386:7) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command
Same issue, it works fine in development mode, but not in production mode.
🤷🏻 My vuetify project works fine (Node 17):
package.json
{
"name": "steklopod",
"scripts": {
"dev": "export NODE_OPTIONS=--openssl-legacy-provider; nuxi dev",
"build": "export NODE_OPTIONS='--openssl-legacy-provider --max-old-space-size=4096'; nuxi build",
"start": "export NODE_OPTIONS=--openssl-legacy-provider; node .output/server/index.mjs",
},
"dependencies": {
"@nuxtjs/auth-next": "latest",
"@nuxtjs/axios": "latest",
"@nuxtjs/dotenv": "latest",
"nuxt-edge": "latest",
"nuxt-healthcheck": "latest",
"@stomp/stompjs": "latest",
"aos": "latest",
"event-source-polyfill": "latest",
"js-cookie": "latest",
"screenfull": "5.2.0",
"simple-peer": "latest",
"sockjs-client": "latest",
"vue-plyr": "latest",
"vue-responsive-video-background-player": "1.3.0",
},
"devDependencies": {
"@babel/eslint-parser": "latest",
"@mdi/js": "latest",
"@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-27383750.2b86345",
"@nuxtjs/vuetify": "latest",
"@nuxt/postcss8": "latest",
"@nuxt/types": "latest",
"@nuxtjs/eslint-config-typescript": "latest",
"@nuxtjs/stylelint-module": "latest",
"@types/aos": "latest",
"@types/js-cookie": "latest",
"@types/simple-peer": "latest",
"@types/sockjs-client": "latest",
"@types/stompjs": "latest",
"@typescript-eslint/eslint-plugin": "latest",
"eslint": "latest",
"eslint-config-prettier": "latest",
"eslint-plugin-import": "latest",
"eslint-plugin-nuxt": "latest",
"eslint-plugin-vue": "latest",
"eslint-plugin-vuetify": "latest",
"postcss-html": "latest",
"prettier": "latest",
"stylelint": "latest",
"stylelint-config-prettier": "latest",
"stylelint-config-recess-order": "latest",
"stylelint-config-recommended-vue": "latest",
"stylelint-config-sass-guidelines": "latest",
"stylelint-config-standard-scss": "latest",
"stylelint-scss": "latest",
"typescript": "latest",
"vuetify": "*"
}
}
And nuxt.config.ts:
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
modules: ['@nuxtjs/axios', '@nuxtjs/auth-next', '@nuxtjs/vuetify'],
vuetify: {
defaultAssets: false,
customVariables: ['~/assets/style/variables.scss'],
optionsPath: 'vuetify.options.ts',
treeShake: true
})
My vuetify project works great when running. But when running in jest it fails.
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
"start": "export NODE_OPTIONS=--max_old_space_size=2024 && nuxi preview --dotenv .env.prod",
"test": "jest"
},
"dependencies": {
"@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/i18n": "^7.2.0",
"@nuxtjs/pwa": "^3.3.5",
"@threec-tv/ovenplayer": "^0.10.13",
"@threec-tv/ui-common": "^0.0.11",
"chart.js": "^2.9.4",
"class-converter": "^1.2.0",
"jwt-decode": "^3.1.2",
"nuxt-edge": "latest",
"socket.io-client": "^4.3.0",
"v-clipboard": "^2.2.3",
"vue-chartjs": "^3.5.1",
"vue-notification": "^1.3.20",
"vue-videojs7": "^1.0.2",
"vue-virtual-scroll-list": "^2.3.3",
"vue-wysiwyg": "^1.7.2"
},
"devDependencies": {
"@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-27389502.88da719",
"@nuxt/types": "^2.15.7",
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/vuetify": "^1.12.3",
"@types/jest": "^27.4.0",
"@vue/test-utils": "^1.3.0",
"axios-mock-adapter": "^1.20.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.4.4",
"eslint-plugin-wdio": "^7.4.2",
"jest": "^27.4.4",
"sass": "^1.45.2",
"sass-loader": "^10.2.0",
"ts-jest": "^27.1.1",
"vue-jest": "^3.0.4"
}
profile.spec.ts
...
describe('Profile component', () => {
test('should call API and populate screen with correct data ', async () => {
let wrapper = setupComponent(ProfileComponent, {$axios: {$get: mockGet}});
// @ts-ignore - For fetch as it doesnt exist in vue only nuxt
await (wrapper.vm.$options.fetch.call(wrapper.vm));
expect(wrapper.findComponent({name: 'v-text-field'}).html()).toContain('my fancy username')
expect(wrapper.vm.$data.profile.displayName).toContain('my display name')
});
}
...
setup.ts
import Vue from "vue";
import Vuetify from 'vuetify'
import {config, createLocalVue, shallowMount, VueClass} from "@vue/test-utils";
Vue.use(Vuetify)
export function setupComponent(component: VueClass<Vue> | any, mockToMerge: any) {
const localVue = createLocalVue()
let mocks = {
$t: (msg: string) => msg,
localePath: (route: string) => route,
...mockToMerge,
};
return shallowMount(component, {
mocks: mocks,
localVue,
vuetify: new Vuetify()
});
}
// Mock Nuxt client-side component
config.stubs['client-only'] = {template: "<div><slot></slot></div> "}
config.stubs['nuxt-link'] = {template: "<div><slot></slot></div> "}
Output:
Test suite failed to run
TypeError: Cannot read property 'use' of undefined
The vuetify 3 beta has been released. Any news to add compatibility for Nuxt 3 ?
@steklopod I did the exact same, it works but it has a problem with SSR Before hydration you can see that no style nor vuetify element are present. After hydration you'll see the vuetify elements and styles on client side.
What did you do to fix vuetify on SSR?
I rollbacked to Nuxt 2 because Nuxt 3 does not support the Auth module which is crucial for me.
@steklopod Thank you. I'm experiencing this issue only on bridge. Nuxt 3 works fine for me. I implemented my own Auth module for oauth 2 btw
The Nuxt 3 support is one of the most important things for the community right now. To accelerate the adaptation of Vue3/Nuxt3/Composition API/Vuetify3, we should make this the top1 priority.
We are migrating away from Vuetify because this isn't done, to your point. A lot of the updates are great, but the coupling to Nuxt 2 is a deal breaker for our team.
The Nuxt 3 support is one of the most important things for the community right now. To accelerate the adaptation of Vue3/Nuxt3/Composition API/Vuetify3, we should make this the top1 priority.
We are migrating away from Vuetify because this isn't done, to your point. A lot of the updates are great, but the coupling to Nuxt 2 is a deal breaker for our team.
We are using Vuetify 3 in a Nuxt 3 project. Vuetify Module isn't needed.
Install Vuetify and Material Icons:
npm install -D vuetify @mdi/font
Add this to your exported config in nuxt.config.ts:
css: [
'vuetify/lib/styles/main.css',
'@mdi/font/css/materialdesignicons.css',
],
build: {
transpile: ['vuetify'],
},
Create plugins/vuetify.ts:
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(createVuetify({
components,
directives,
}));
});
You should now be able to use Vuetify components.