I have problem with new v-directive in nuxt3 project

Post Reply
LeonardoSignorelli
Posts: 5
Joined: 25 Apr 2022, 20:23

07 Jun 2022, 12:30

hi,
i bought the primeblock for vue and i'm trying to use it inside a nuxt3 project but it doesn't work.
i correctly implemented the primevue free component but when i try to use primeblock components that require new v-directive ( specifically styleclass and ripple ) it doesn't work.

This is my primevue plugin

Code: Select all

import { defineNuxtPlugin } from '#app'
import PrimeVue from 'primevue/config'
import Sidebar from 'primevue/sidebar'
import Button from 'primevue/button'
import Menubar from 'primevue/menubar'
import Panel from 'primevue/panel'
import InputText from 'primevue/inputtext'
import Toast from 'primevue/toast'
import ToastService from 'primevue/toastservice'
import ConfirmationService from 'primevue/confirmationservice'
import TabView from 'primevue/tabview'
import TabPanel from 'primevue/tabpanel'
import Splitter from 'primevue/splitter'
import SplitterPanel from 'primevue/splitterpanel'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import PanelMenu from 'primevue/panelmenu'
import ScrollPanel from 'primevue/scrollpanel'
import Card from 'primevue/card'
import Steps from 'primevue/steps'
import ConfirmDialog from 'primevue/confirmdialog'
import Dialog from 'primevue/dialog'
import Menu from 'primevue/menu'
import StyleClass from 'primevue/styleclass'
import Ripple from 'primevue/ripple'


export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PrimeVue, { ripple: true })
  nuxtApp.vueApp.use(ToastService)
  nuxtApp.vueApp.use(ConfirmationService)
  nuxtApp.vueApp.component('Button', Button)
  nuxtApp.vueApp.component('Menubar', Menubar)
  nuxtApp.vueApp.component('Panel', Panel)
  nuxtApp.vueApp.component('InputText', InputText)
  nuxtApp.vueApp.component('Toast', Toast)
  nuxtApp.vueApp.component('TabView', TabView)
  nuxtApp.vueApp.component('TabPanel', TabPanel)
  nuxtApp.vueApp.component('Splitter', Splitter)
  nuxtApp.vueApp.component('SplitterPanel', SplitterPanel)
  nuxtApp.vueApp.component('DataTable', DataTable)
  nuxtApp.vueApp.component('Column', Column)
  nuxtApp.vueApp.component('PanelMenu', PanelMenu)
  nuxtApp.vueApp.component('ScrollPanel', ScrollPanel)
  nuxtApp.vueApp.component('Card', Card)
  nuxtApp.vueApp.component('Steps', Steps)
  nuxtApp.vueApp.component('ConfirmDialog', ConfirmDialog)
  nuxtApp.vueApp.component('Dialog', Dialog)
  nuxtApp.vueApp.component('Sidebar', Sidebar)
  nuxtApp.vueApp.component('Menu', Menu)
  nuxtApp.vueApp.directive('styleclass', StyleClass)
  nuxtApp.vueApp.directive('ripple', Ripple)

Single component works, directive no

Thank you

tugce.kucukoglu
Posts: 383
Joined: 23 Oct 2020, 09:28

07 Jun 2022, 13:45

Hi,

Could you please try to use the latest PrimeVue version 3.13.1? It has some Nuxt3 fixes.

LeonardoSignorelli
Posts: 5
Joined: 25 Apr 2022, 20:23

08 Jun 2022, 11:10

It doesn't work.

Note that if i don't use v-ripple and v-styleclass it works ( some main functionalities doesn't but i don't get any error ).

that's the error that i get
SSR Error transforming /Users/macbook/Desktop/lab/nuxt3studio/components/navbartest.vue: Custom directive is missing corresponding SSR transform and will be ignored.

at Object.createCompilerError (node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:19:19)
at createSSRCompilerError (node_modules/@vue/compiler-ssr/dist/compiler-ssr.cjs.js:145:24)
at Array.ssrPostTransformElement (node_modules/@vue/compiler-ssr/dist/compiler-ssr.cjs.js:589:41)
at traverseNode (node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2203:19)
at traverseChildren (node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2145:9)
at traverseNode (node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2196:13)
at traverseChildren (node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2145:9)
at traverseNode (node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2196:13)
at Object.transform (node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2078:5)
at Object.compile (node_modules/@vue/compiler-ssr/dist/compiler-ssr.cjs.js:1096:17)

Vite server built in 5198ms 11:07:23
Nitro built in 157 ms 11:07:24
[Vue warn]: Invalid vnode type when creating vnode: undefined.
(node:25244) UnhandledPromiseRejectionWarning: TypeError: Invalid value used as weak map key
at WeakMap.set (<anonymous>)
at normalizePropsOptions (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2694:11)
at createComponentInstance (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6150:23)
at renderComponentVNode (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:197:22)
at Module.ssrRenderComponent (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:623:12)
at _sfc_ssrRender (file:///Users/macbook/Desktop/lab/nuxt3studio/.nuxt/dist/server/server.mjs:2839:31)
at renderComponentSubTree (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:13)
at renderComponentVNode (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)
at renderVNode (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
at renderVNode (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:310:17)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:25244) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unh ... tions_mode). (rejection id: 1)
(node:25244) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[Vue warn]: Invalid vnode type when creating vnode: undefined.
(node:25244) UnhandledPromiseRejectionWarning: TypeError: Invalid value used as weak map key
at WeakMap.set (<anonymous>)
at normalizePropsOptions (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2694:11)
at createComponentInstance (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6150:23)
at renderComponentVNode (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:197:22)
at Module.ssrRenderComponent (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:623:12)
at _sfc_ssrRender (file:///Users/macbook/Desktop/lab/nuxt3studio/.nuxt/dist/server/server.mjs:2839:31)
at renderComponentSubTree (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:13)
at renderComponentVNode (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)
at renderVNode (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)
at renderVNode (/Users/macbook/Desktop/lab/nuxt3studio/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:310:17)
(node:25244) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unh ... tions_mode). (rejection id: 2)
[Vue Router warn]: No match found for location with path "/favicon.ico"

tugce.kucukoglu
Posts: 383
Joined: 23 Oct 2020, 09:28

09 Jun 2022, 08:20

Hi,

Could you please also add

Code: Select all

import { usePrimeVue } from "primevue/config";

const $primevue = usePrimeVue();
defineExpose({
    $primevue
})

I have a repo for this usage. https://github.com/tugcekucukoglu/pv-ts ... App.vue#L6

LeonardoSignorelli
Posts: 5
Joined: 25 Apr 2022, 20:23

09 Jun 2022, 11:42

it doesn't work either.

It still complains about custom directive that mean navbar and other components don't work.

tugce.kucukoglu
Posts: 383
Joined: 23 Oct 2020, 09:28

09 Jun 2022, 16:27

Please try to remove package-lock.json and node_modules files and install them again with PrimeVue v3.13.1. They could be out of date. When this file is out of date, it sometimes causes problems.

LeonardoSignorelli
Posts: 5
Joined: 25 Apr 2022, 20:23

10 Jun 2022, 01:35

it seems it's working. Thank you.

LeonardoSignorelli
Posts: 5
Joined: 25 Apr 2022, 20:23

14 Jun 2022, 15:52

in the dev mode on localhost is working fine, but when i generate the build with static file the animation don't work.

For example : the menu doesn't work. When i click on the hamburger it doesn't work.
Another example is the dismissing icon in the message component.

On my computer ( localhost ) is working perfectly fine, with static generate file it doesn't work.

Any suggest?


I get this error in the console.


https://www.website/_nuxt/entry-c8837d5f.mjs

Code: Select all

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

tugce.kucukoglu
Posts: 383
Joined: 23 Oct 2020, 09:28

15 Jun 2022, 12:09

Hi again!

It seems there is another core issue from PrimeVue side. Could you please create a ticket on Github for this?

Thank you.

Post Reply

Return to “PrimeBlocks for PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest