search

acidjazz / tv-toast

Programmatic toasts for Nuxt.js powered by Tailwind CSS
MIT License
116 stars 11 forks source link

nuxt-tailvue not working with Nuxt3 #32

Closed pheng0077 closed 2 years ago

pheng0077 commented 2 years ago

yarn add nuxt-tailvue

buildModues: [
["nuxt-tailvue", { toast: true }]
]
 ERROR  Error compiling template:  {                                                                                                                                                                                      18:33:28  
  fileName: 'options.js',
  src: 'D:\\Development Projects\\full-stack-projects\\gym-asp-nuxt3\\frontend\\node_modules\\nuxt-tailvue\\templates\\options.js',
  options: true,
  write: true,
  filename: 'options.js',
  dst: 'D:/Development Projects/full-stack-projects/gym-asp-nuxt3/frontend/.nuxt/options.js'
}

 ERROR  Cannot start nuxt:  serializeFunction is not defined                                                                                                                                                              18:33:28  

  at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/D:/Development%20Projects/full-stack-projects/gym-asp-nuxt3/frontend/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /D:/Development%20Projects/full-stack-projects/gym-asp-nuxt3/frontend/node_modules/nuxt/dist/index.mjs:1562:22
  at async Promise.all (index 19)
  at async generateApp (/D:/Development%20Projects/full-stack-projects/gym-asp-nuxt3/frontend/node_modules/nuxt/dist/index.mjs:1561:3)
  at async _applyPromised (/D:/Development%20Projects/full-stack-projects/gym-asp-nuxt3/frontend/node_modules/perfect-debounce/dist/index.mjs:54:10)

 ERROR  [unhandledRejection] serializeFunction is not defined                                                                                                                                                             18:33:28  

  at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/D:/Development%20Projects/full-stack-projects/gym-asp-nuxt3/frontend/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /D:/Development%20Projects/full-stack-projects/gym-asp-nuxt3/frontend/node_modules/nuxt/dist/index.mjs:1562:22
  at async Promise.all (index 19)
  at async generateApp (/D:/Development%20Projects/full-stack-projects/gym-asp-nuxt3/frontend/node_modules/nuxt/dist/index.mjs:1561:3)
  at async _applyPromised (/D:/Development%20Projects/full-stack-projects/gym-asp-nuxt3/frontend/node_modules/perfect-debounce/dist/index.mjs:54:10)
acidjazz commented 2 years ago

@sokphengkean please use https://github.com/fumeapp/tailvue

pheng0077 commented 2 years ago

@sokphengkean please use https://github.com/fumeapp/tailvue I've tried to follow the instruction, but it shows $toast is not defined. Did I miss something?

buildModules: ["@nuxtjs/tailwindcss", "@tailvue/nuxt"],

tailwind.config.js module.exports = { content: [ components//*.{vue,js}, layouts/*/.vue, pages//*.vue, composables/*/.{js,ts}, plugins/*/.{js,ts}, App.{js,ts,vue}, app.{js,ts,vue}, "node_modules/tailvue/dist/tailvue.es.js", ], theme: { extend: {}, }, plugins: [], };

In app.vue function call $toast.show("Hello World");

acidjazz commented 2 years ago

@sokphengkean did you 1st do in app.vue:

const { $toast } = useNuxtApp();
pheng0077 commented 2 years ago

It works. Thank you so much :)