Is there any possibility to use this module with nuxt3 composition api?

[AnToHu0]

I`m moving big project to Nuxt 3 and found that $device is not available on template and I have no idea where to get it with composition api. Is it possible to use this module with nuxt 3 or not yet?

[BulgarianHealer]

It's almost working without a problem, it gives an error for named export

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.vite/deps/vue.js?v=d84c128d' does not provide an export named 'default' (at device.plugin.js:1:1)

[AnToHu0]

It's almost working without a problem, it gives an error for named export

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.vite/deps/vue.js?v=d84c128d' does not provide an export named 'default' (at device.plugin.js:1:1)

I think it`s because of using module.exports instead of esm.

[weicheng2138]

It's almost working without a problem, it gives an error for named export

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.vite/deps/vue.js?v=d84c128d' does not provide an export named 'default' (at device.plugin.js:1:1)

I think it`s because of using module.exports instead of esm.

So how can we solve this problem?

[AnToHu0]

Ive just rewrite a plugin for my project to nuxt 3 plugin format and it works fine. I think its not a big deal to make a new branch with just nuxt 3 version.

It's almost working without a problem, it gives an error for named export

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.vite/deps/vue.js?v=d84c128d' does not provide an export named 'default' (at device.plugin.js:1:1)

I think it`s because of using module.exports instead of esm.

So how can we solve this problem?

[Redemption198]

I ported the module to Nuxt 3 and created a pull request, it is currently missing tests ~~and Nuxt Bridge support~~ (Marked Nuxt Bridge as supported).

[nathanchase]

I ported the module to Nuxt 3 and created a pull request, it is currently missing tests ~and Nuxt Bridge support~ (Marked Nuxt Bridge as supported).

Is this available on npm? I'm also in the middle of porting my Nuxt 2 app to Nuxt 3, and I use $device a lot.

[Redemption198]

I ported the module to Nuxt 3 and created a pull request, it is currently missing tests ~and Nuxt Bridge support~ (Marked Nuxt Bridge as supported).

Is this available on npm? I'm also in the middle of porting my Nuxt 2 app to Nuxt 3, and I use $device a lot.

Nope, it is not available on npm, but you can install it temporarily from GitHub by pointing at my fork with npm install Redemption198/device-module or yarn add Redemption198/device-module. (if it doesnt work try with yarn add git+https://github.com/Redemption198/device-module#master)

[nathanchase]

Nope, it is not available on npm, but you can install it temporarily from GitHub by pointing at my fork with npm install Redemption198/device-module or yarn add Redemption198/device-module. (if it doesnt work try with yarn add git+https://github.com/Redemption198/device-module#master)

I get this error - seems like the path is not finding its way to node_modules? ERROR Cannot start nuxt: Cannot find module '/home/jacopopinna/Documenti/GitHub/device-module/src/module'

[Redemption198]

Nope, it is not available on npm, but you can install it temporarily from GitHub by pointing at my fork with npm install Redemption198/device-module or yarn add Redemption198/device-module. (if it doesnt work try with yarn add git+https://github.com/Redemption198/device-module#master)

I get this error - seems like the path is not finding its way to node_modules? ERROR Cannot start nuxt: Cannot find module '/home/jacopopinna/Documenti/GitHub/device-module/src/module'

Sorry I forgot to prepack the module, it should be fixed now.

[thamudi]

I just installed your version of the package and I am getting this Error

 ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'public')                                                                                                                     

It happens after a fresh install and adding it to modules

[Redemption198]

I just installed your version of the package and I am getting this Error

 ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'public')                                                                                                                     

It happens after a fresh install and adding it to modules

I just tested it on a local project running the latest RC of Nuxt and I couldn't reproduce your issue. Can you provide a reproduction?

[thamudi]

I just installed your version of the package and I am getting this Error

 ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'public')                                                                                                                     

It happens after a fresh install and adding it to modules

I just tested it on a local project running the latest RC of Nuxt and I couldn't reproduce your issue. Can you provide a reproduction?

It was just a fresh install on a recent project, the moment i load the module it give me an error, the most i got to was the line

Update

I console logged options.enabled.runtimeConfig and runtimeConfig seems to be undefined.

I was able to bypass that error by updating the if statement to the following:

 setup(options, nuxt) {
    if (options.enabled.runtimeConfig?.public) { // this line
      nuxt.options.runtimeConfig.public.device = defu(nuxt.options.runtimeConfig.public.device, {
        enabled: options.enabled,
        defaultUserAgent: options.defaultUserAgent,
        refreshOnResize: options.refreshOnResize
      });
      const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
      nuxt.options.build.transpile.push(runtimeDir);
      addPlugin(resolve(runtimeDir, "plugin"));
      nuxt.hook("imports:dirs", (dirs) => {
        dirs.push(resolve(runtimeDir, "composables"));
      });
    }
  }

However I still can't use either $device or const { isMobile } = useDevice()

[Redemption198]

I just installed your version of the package and I am getting this Error

ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'public')

It happens after a fresh install and adding it to modules

I just tested it on a local project running the latest RC of Nuxt and I couldn't reproduce your issue. Can you provide a reproduction?

It was just a fresh install on a recent project, the moment i load the module it give me an error, the most i got to was the line

Update

I console logged options.enabled.runtimeConfig and runtimeConfig seems to be undefined.

I was able to bypass that error by updating the if statement to the following:

 setup(options, nuxt) {

    if (options.enabled.runtimeConfig?.public) { // this line

      nuxt.options.runtimeConfig.public.device = defu(nuxt.options.runtimeConfig.public.device, {

        enabled: options.enabled,

        defaultUserAgent: options.defaultUserAgent,

        refreshOnResize: options.refreshOnResize

      });

      const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));

      nuxt.options.build.transpile.push(runtimeDir);

      addPlugin(resolve(runtimeDir, "plugin"));

      nuxt.hook("imports:dirs", (dirs) => {

        dirs.push(resolve(runtimeDir, "composables"));

      });

    }

  }

However I still can't use either $device or const { isMobile } = useDevice()

Did you set anything inside module in your nuxt.config.ts?

[thamudi]

Did you set anything inside module in your nuxt.config.ts?

Here's the nuxt.config.ts that I have atm:

  modules: ['@nuxtjs/tailwindcss', 'nuxt-healthcheck', '@nuxtjs/pwa','@nuxtjs/device'],
  // device: {
  //   refreshOnResize: true
  // },
  css: [
    '@/assets/css/typography.css',
    '@/assets/css/form.css',
    '@/assets/css/global.css'
  ],

[Redemption198]

Did you set anything inside module in your nuxt.config.ts?

Here's the nuxt.config.ts that I have atm:

  modules: ['@nuxtjs/tailwindcss', 'nuxt-healthcheck', '@nuxtjs/pwa','@nuxtjs/device'],

  // device: {

  //   refreshOnResize: true

  // },

  css: [

    '@/assets/css/typography.css',

    '@/assets/css/form.css',

    '@/assets/css/global.css'

  ],

Which version of Nuxt are you using?

[thamudi]

Which version of Nuxt are you using?

"version": "3.0.0-27494471.1091d45"

In my package.json its nuxt3 latest CR

[Redemption198]

Which version of Nuxt are you using?

"version": "3.0.0-27494471.1091d45"

In my package.json its nuxt3 latest CR

I think you're using and old version of Nuxt 3, run npx nuxi upgrade it should update your Nuxt version to RC11.

[thamudi]

npx nuxi upgrade

I just did and now nuxt is at Nuxt 3.0.0-rc.11 but the error still persists. I think this thread is getting too long for this issue so I will open a separate issue with it.

[Redemption198]

npx nuxi upgrade

I just did and now nuxt is at Nuxt 3.0.0-rc.11 but the error still persists.

I think this thread is getting too long for this issue so I will open a separate issue with it.

Delete your node_modules and any lock file you have, then reinstall. I noticed that you have the @nuxtjs/pwa module installed, it shouldn't be compatible with Nuxt 3, if you need a replacement you can use @kevinmarrec/nuxt-pwa-module.

[thamudi]

Delete your node_modules and any lock file you have, then reinstall. I noticed that you have the @nuxtjs/pwa module installed, it shouldn't be compatible with Nuxt 3, if you need a replacement you can use @kevinmarrec/nuxt-pwa-module.

@Redemption198 Thank you so much, that fixed all of the issues and now it works perfectly!

I really hope they merge this into the original project.

Thanks again!

[Redemption198]

Delete your node_modules and any lock file you have, then reinstall. I noticed that you have the @nuxtjs/pwa module installed, it shouldn't be compatible with Nuxt 3, if you need a replacement you can use @kevinmarrec/nuxt-pwa-module.

@Redemption198 Thank you so much, that fixed all of the issues and now it works perfectly!

I really hope they merge this into the original project.

Thanks again!

You're welcome

[dotneet]

Nuxt3 support has been shipped in v3.0.0.