How to install in nuxt project?

[adibpwd]

I want use vuesax in nuxt, how to install it?

[lk77]

There is no option to install vuesax anymore in nuxt, and it was for old vuesax anyway, but i guess you can get inspiration from the old nuxt template :

https://github.com/nuxt/create-nuxt-app/tree/ed17e67e1499a69f9c6eb364c0df6b64cd5a2a19/packages/cna-template/template/frameworks/vuesax

it's for vue2, but i think the same principles apply for vue3 :

import Vuesax from 'vuesax3';
import 'vuesax3/dist/vuesax.css' ;

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vuesax)
})

and then you simply use the vuesax components in your pages/components

[yuyanghh]

@lk77 Thanks for the solution. I've tried with nuxt ^3.8.1, vue ^3.3.8, and vuesax3 ^4.2.1, yet encountered a complain of type definition:

Argument of type '(app: any, options: any) => void' is not assignable to parameter of type 'Plugin<[]>'.
  Type '(app: any, options: any) => void' is not assignable to type '((app: App<any>) => any) & { install?: ((app: App<any>) => any) | undefined; }'.
    Type '(app: any, options: any) => void' is not assignable to type '(app: App<any>) => any'.
      Target signature provides too few arguments. Expected 2 or more, but got 1.ts(2345)

I had to edit the module declaration to make Vuesax working.

declare module "vuesax3" {
  export default function install(app: any): any
}

Not sure whether this modification is recommended...

[lk77]

@yuyanghh i guess i could do that :

declare module "vuesax3" {
  export default function install(app: any, options?:any): any
}

in the meantime i think you can do :

nuxtApp.vueApp.use(Vuesax, {})

it should not complain anymore

[yuyanghh]

Yes! The warning is gone! Thanks a lot!

[lk77]

@yuyanghh i published an alpha version https://www.npmjs.com/package/vuesax3/v/4.3.0-alpha.0 with the changes to index.d.ts among other things, could you try it and tell me if your issue is fixed without the {} ?

[yuyanghh]

@lk77 Thanks a lot for the update. It fixed the issue.