Nuxt 3 Support #351

razorness · 2022-07-25T11:21:05Z

For people who are struggling using VWave with Nuxt 3

There are two problems with the current implementation:

VWave needs to implement getSSRProps.
The method serialize does not exist in /nuxt/plugin.js:

v-wave/nuxt/plugin.js

Line 4 in 34f26b6

Vue.use(VWave, <%= serialize(options) %>)

So here is a workaround

Create a new file in plugins folder, fe: plugins/vWave.directive.ts
Paste this snippet:

import { defineNuxtPlugin } from '#app';
import VWave from 'v-wave';

// In this example, we rename the directive to `ripple`
const directiveName = 'ripple';

export default defineNuxtPlugin((app) => {

	const { vWave, vWaveTrigger } = VWave.createLocalWaveDirective({}, app.vueApp);

	app.vueApp.directive(directiveName, {
		...vWave,
		getSSRProps(binding, vnode) {
			return {};
		}
	});
	app.vueApp.directive(`${directiveName}-trigger`, {
		...vWaveTrigger,
		getSSRProps(binding, vnode) {
			return {};
		}
	});

});

That's it. Touching nuxt.config.ts is not needed.

The text was updated successfully, but these errors were encountered:

justintaddei · 2022-07-26T18:50:16Z

Thank you for bringing this to my attention! I'll release support for Nuxt 3 in the next ~~day or two~~ week or two.

DamianGlowala · 2022-09-28T13:37:05Z

Hi @justintaddei, how is the progress going on supporting Nuxt 3?

justintaddei · 2022-09-29T06:35:28Z

@DamianGlowala delayed, but not forgotten. I haven't had a chance to work on this yet, but I plan to soon.

justintaddei · 2022-09-29T06:35:33Z

If anyone knows how to make this change with backwards compatibility for Nuxt 2 please let me know.

RejownAhmed · 2023-05-21T17:11:41Z

@justintaddei It's better you create another git repo for NuxT 3+ versions.

justintaddei · 2023-06-07T17:59:18Z

After some research, it seems impossible to support both Nuxt 2 and 3 in the same package.

Going forward:

I will migrate to Nuxt 3 for @latest releases. This will be a breaking change and bump the version to v2.0.0
Nuxt 2 support will continue in a separate branch and will continue to be released under v1.x version numbers and tagged with @nuxt2 to allow for easy installation in Nuxt 2 projects ($ npm install v-wave@nuxt2).
Nuxt 2 and 3 versions will maintain feature parody.
v-wave has always maintained backwards compatibility in the past. For future changes, this will be a requirement due to the use of v1.x for Nuxt 2 and v2.x for Nuxt 3. The v-wave API has been stable for a long time now, so I don't see this causing any issues.

Migration to Nuxt 3 will take place sometime in the next few weeks, depending on my schedule.

NtchPlayer · 2023-06-24T15:51:03Z

Nice ! I am impatient to see that, your plugin is really usefull for me ! Thx for your work ❤️

yldshv · 2023-08-16T11:41:52Z

@razorness
Hey, do you have a working workaround for this project (justintaddei/v-shared-element#244) as well (Should be the same issue)? Unfortunately, I can't get it to work myself :( It would be really awesome if that's possible. Many thanks in advance and best regards.

razorness · 2023-08-17T10:57:14Z

@yldshv I am not using Nuxt. Sorry.

But take a short look into the example. You can access the Vue app instance via app.vueApp. Take another look into the install method of your wanted Vue 3 extension:

https://github.com/justintaddei/v-shared-element/blob/5ab337b02b669bcbbd029f842d41651df7a6356d/src/index.ts#L151-L156

Since v-shared-element is a little stingy with exports, I think you need to trick the install method by mocking an object which looks like a Vue 3 app instance to catch illusory, $createIllusoryElement and the result of insertedMounted(). Then add this by yourself like the example above.

SharedElementRouteGuard could be bound via defineNuxtRouteMiddleware. Dont apply this guard in SSR context.

yldshv · 2023-08-17T13:52:01Z

@yldshv I am not using Nuxt. Sorry.

But take a short look into the example. You can access the Vue app instance via app.vueApp. Take another look into the install method of your wanted Vue 3 extension:

https://github.com/justintaddei/v-shared-element/blob/5ab337b02b669bcbbd029f842d41651df7a6356d/src/index.ts#L151-L156

Since v-shared-element is a little stingy with exports, I think you need to trick the install method by mocking an object which looks like a Vue 3 app instance to catch illusory, $createIllusoryElement and the result of insertedMounted(). Then add this by yourself like the example above.

SharedElementRouteGuard could be bound via defineNuxtRouteMiddleware. Dont apply this guard in SSR context.

Thank you @razorness. I will give it a shot :D

justintaddei · 2023-09-06T22:25:56Z

Hey everyone! I just wanted to leave an update here. I haven't forgotten about this :)

Nuxt 3 support is still planned but I cannot give an ETA at this time. As soon as my schedule clears up, I will begin working on it.

NtchPlayer · 2023-10-21T18:58:11Z

Hi @justintaddei !
Did you have any news about a potential planification for Nuxt 3 support ?
I'm a little impatient to implement it into my web site :3

justintaddei · 2023-10-23T05:12:09Z

@NtchPlayer tentatively planned for the first week of November!

justintaddei · 2023-11-07T10:49:52Z

Hi everyone!

I've had an idea that would allow for nuxt2 and nuxt3 installs with the same version of v-wave. This removes the necessity of the breaking change detailed in this comment.

I came up with this approach after not having much luck creating a nuxt module that can exist alongside a vanilla vue plugin. That is, I don't want to use nuxt's module builder because this isn't a nuxt module... it's a vue plugin with nuxt support. If anyone has more experience working with modules in nuxt 3 and knows how to achieve the same behavior that exists for nuxt 2, please enlighten me :)

!!! I'm not sure if this is a good solution. Please provide feedback if you don't like this approach !!!

You can test this locally by installing v-wave@beta:
$ npm i v-wave@beta

nuxt@^2.x.x installation steps remain the same and still use the @latest release.

When installing v-wave into a nuxt3 project, a postinstall script is run that will create the necessary plugin files (this is all that is needed for v-wave to work inside of nuxt because auto-import will pick these up):

The file that registers the plugin (this will also be where global v-wave options are set):

// v-wave.client.ts
import vWave, { type IVWavePluginOptions } from 'v-wave'

export const options: Partial<IVWavePluginOptions> = {
    // Place any global v-wave options here
}

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(vWave, options)
})

And a stub that is needed when registering directives:

(https://nuxt.com/docs/guide/directory-structure/plugins#vue-directives)
If you register a Vue directive, you must register it on both client and server side unless you are only using it when rendering one side. If the directive only makes sense from a client side, you can always move it to ~/plugins/my-directive.client.ts and provide a 'stub' directive for the server in ~/plugins/my-directive.server.ts.

// v-wave.server.ts
import { options } from './v-wave.client';

export default defineNuxtPlugin(({ vueApp }) => {
    vueApp.directive(options.directive ?? 'wave', {});
    vueApp.directive(`${options.directive ?? 'wave'}-trigger`, {});
});

A fresh nuxt 3 project with v-wave installed:

So far the install script is as follows (this will need to be more robust before it's ready for a stable release, but it gets the point across at least):

const fs = require('fs')
const path = require('path')

const pkg = require(path.join(process.env.INIT_CWD, 'package.json'))

const nuxtVersion = pkg.dependencies?.nuxt ?? pkg.devDependencies?.nuxt

if (!nuxtVersion || /2\.\d+\.\d+/.test(nuxtVersion)) {
  process.exit(0)
}

if (!fs.existsSync(path.join(process.env.INIT_CWD, 'plugins'))) {
  fs.mkdirSync(path.join(process.env.INIT_CWD, 'plugins'))
}

try {
  fs.copyFileSync(
    path.join(__dirname, 'v-wave.client.ts'),
    path.join(process.env.INIT_CWD, 'plugins', 'v-wave.client.ts'),
    fs.constants.COPYFILE_EXCL
  )
  fs.copyFileSync(
    path.join(__dirname, 'v-wave.server.ts'),
    path.join(process.env.INIT_CWD, 'plugins', 'v-wave.server.ts'),
    fs.constants.COPYFILE_EXCL
  )
} catch (e) {
  process.exit(0)
}

justintaddei · 2023-11-07T21:57:29Z

However, on second thought, the better approach might just be to provide the boilerplate for nuxt in the readme instead of dealing with the complexity of auto-generating the file.

What do you guys think?

NtchPlayer · 2023-11-07T22:11:05Z

Hum, I have any experience with Nuxt module creation :'( A create some directive for me (image lazy loading as exemple). I never take time to try to create my own plugin. I don't know if you can get more help on the [nuxt official discord server] ? (https://discord.com/invite/nuxt) (oh, I just see that you already join it today ^^)

I can say that, I use vue masonry on my project, and I have two configuration (one for the server side and one for client side like you suggest) because vue masonry works only on client side.

// @/plugins/vue-masonry.js
export default defineNuxtPlugin(async (nuxtApp) => {
  if (process.server) {
    nuxtApp.vueApp.directive('masonry', {})
    nuxtApp.vueApp.directive('masonry-tile', {})
  }
  if (process.client) {
    const { VueMasonryPlugin } = await import('vue-masonry')
    nuxtApp.vueApp.use(VueMasonryPlugin)
  }
})

justintaddei · 2023-11-08T07:44:10Z

Thanks @NtchPlayer. Yeah, I joined the discord and asked around but nothing useful has come of that yet.

DamianGlowala · 2023-11-08T12:47:50Z

Currently, what works for me perfectly fine is the following plugin:

import VWave from "v-wave";

const directiveName = "ripple";

export default defineNuxtPlugin((app) => {
    const { vWave, vWaveTrigger } = VWave.createLocalWaveDirective(
        {},
        app.vueApp
    );

    app.vueApp.directive(directiveName, {
        ...vWave,
        getSSRProps() {
            return {};
        }
    });

    app.vueApp.directive(`${directiveName}-trigger`, {
        ...vWaveTrigger,
        getSSRProps() {
            return {};
        }
    });
});

What about creating a Nuxt module which would inject a plugin file with the above content?

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const { resolve } = createResolver(import.meta.url)

    addPlugin(resolve('<path-to-plugin>'))
  }
})

amirsafaricg · 2023-12-03T12:17:35Z

Hi everyone!

I've had an idea that would allow for nuxt2 and nuxt3 installs with the same version of v-wave. This removes the necessity of the breaking change detailed in this comment.

I came up with this approach after not having much luck creating a nuxt module that can exist alongside a vanilla vue plugin. That is, I don't want to use nuxt's module builder because this isn't a nuxt module... it's a vue plugin with nuxt support. If anyone has more experience working with modules in nuxt 3 and knows how to achieve the same behavior that exists for nuxt 2, please enlighten me :)

!!! I'm not sure if this is a good solution. Please provide feedback if you don't like this approach !!!

You can test this locally by installing v-wave@beta:
$ npm i v-wave@beta

nuxt@^2.x.x installation steps remain the same and still use the @latest release.

When installing v-wave into a nuxt3 project, a postinstall script is run that will create the necessary plugin files (this is all that is needed for v-wave to work inside of nuxt because auto-import will pick these up):

The file that registers the plugin (this will also be where global v-wave options are set):
// v-wave.client.ts
import vWave, { type IVWavePluginOptions } from 'v-wave'

export const options: Partial<IVWavePluginOptions> = {
    // Place any global v-wave options here
}

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(vWave, options)
})
And a stub that is needed when registering directives:

(https://nuxt.com/docs/guide/directory-structure/plugins#vue-directives)
If you register a Vue directive, you must register it on both client and server side unless you are only using it when rendering one side. If the directive only makes sense from a client side, you can always move it to ~/plugins/my-directive.client.ts and provide a 'stub' directive for the server in ~/plugins/my-directive.server.ts.
// v-wave.server.ts
import { options } from './v-wave.client';

export default defineNuxtPlugin(({ vueApp }) => {
    vueApp.directive(options.directive ?? 'wave', {});
    vueApp.directive(`${options.directive ?? 'wave'}-trigger`, {});
});
A fresh nuxt 3 project with v-wave installed:

So far the install script is as follows (this will need to be more robust before it's ready for a stable release, but it gets the point across at least):
const fs = require('fs')
const path = require('path')

const pkg = require(path.join(process.env.INIT_CWD, 'package.json'))

const nuxtVersion = pkg.dependencies?.nuxt ?? pkg.devDependencies?.nuxt

if (!nuxtVersion || /2\.\d+\.\d+/.test(nuxtVersion)) {
  process.exit(0)
}

if (!fs.existsSync(path.join(process.env.INIT_CWD, 'plugins'))) {
  fs.mkdirSync(path.join(process.env.INIT_CWD, 'plugins'))
}

try {
  fs.copyFileSync(
    path.join(__dirname, 'v-wave.client.ts'),
    path.join(process.env.INIT_CWD, 'plugins', 'v-wave.client.ts'),
    fs.constants.COPYFILE_EXCL
  )
  fs.copyFileSync(
    path.join(__dirname, 'v-wave.server.ts'),
    path.join(process.env.INIT_CWD, 'plugins', 'v-wave.server.ts'),
    fs.constants.COPYFILE_EXCL
  )
} catch (e) {
  process.exit(0)
}

is this a guide on how to setup v-wave in Nuxt 3 ? I dont get the last code that is in your reply, If you could add some instructions for nuxt 3 to the document would be a very big help :)
I really appriciate it

justintaddei · 2023-12-05T09:35:12Z

@amirsafaricg it's not a guide... just an idea for how I might move forward with the upgrade. I have a working solution for Nuxt 3 that I finished today. It should be backwards compatible with Nuxt 2 as well but I need to wait until tomorrow before I can test that. Either way, expect a release with Nuxt 3 support tomorrow or Wednesday!

justintaddei · 2023-12-05T09:58:24Z

@amirsafaricg in the mean time this will get you up and running with v-wave in Nuxt 3:
npm install v-wave@beta && rm -rf ./node_modules/v-wave/dist/cjs

All other steps are the same as is described in the current docs

amirsafaricg · 2023-12-05T17:59:33Z

That's really great to hear !
I'm really happy to hear that ! Ill wait until Wednesday its definitely worth the wait. The v-wave directive is too useful to be rushed. Ill wait until you finish it ;)

Thanks really !

justintaddei · 2023-12-07T00:40:48Z

Nuxt 3 support added in #593.

Release v2.0.0 is live on npm. Please use npm i v-wave@latest to update your projects.

The breaking change is due v-wave@^2.0.0 not being backward compatible with Nuxt 2. Installation and usage of v-wave@^2.0.0 in a Nuxt 3 project is identical to v-wave@^1.0.0 in a Nuxt 2 project.

If you have any issues getting it to work in your project, please feel free to open another issue!

NtchPlayer · 2023-12-07T19:12:19Z

I just install version 2.0.0 and it's work perfectly ! Thx you for your work 😄

justintaddei self-assigned this Jul 26, 2022

justintaddei added the feature request label Jul 26, 2022

justintaddei mentioned this issue Jan 10, 2023

Nuxt 3 Compatibility justintaddei/v-shared-element#244

Open

justintaddei added this to the v2.0.0 milestone Jul 13, 2023

sadeghbarati mentioned this issue Aug 15, 2023

docs: warn directives must be registered on both server/client nuxt/nuxt#22627

Merged

8 tasks

justintaddei closed this as completed Dec 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nuxt 3 Support #351

Nuxt 3 Support #351

razorness commented Jul 25, 2022

justintaddei commented Jul 26, 2022 •

edited

DamianGlowala commented Sep 28, 2022

justintaddei commented Sep 29, 2022

justintaddei commented Sep 29, 2022

RejownAhmed commented May 21, 2023

justintaddei commented Jun 7, 2023

NtchPlayer commented Jun 24, 2023

yldshv commented Aug 16, 2023

razorness commented Aug 17, 2023

yldshv commented Aug 17, 2023 •

edited

justintaddei commented Sep 6, 2023

NtchPlayer commented Oct 21, 2023

justintaddei commented Oct 23, 2023

justintaddei commented Nov 7, 2023 •

edited

justintaddei commented Nov 7, 2023 •

edited

NtchPlayer commented Nov 7, 2023 •

edited

justintaddei commented Nov 8, 2023

DamianGlowala commented Nov 8, 2023

amirsafaricg commented Dec 3, 2023

!!! I'm not sure if this is a good solution. Please provide feedback if you don't like this approach !!!

justintaddei commented Dec 5, 2023

justintaddei commented Dec 5, 2023

amirsafaricg commented Dec 5, 2023

justintaddei commented Dec 7, 2023

NtchPlayer commented Dec 7, 2023

Nuxt 3 Support #351

Nuxt 3 Support #351

Comments

razorness commented Jul 25, 2022

For people who are struggling using VWave with Nuxt 3

So here is a workaround

justintaddei commented Jul 26, 2022 • edited

DamianGlowala commented Sep 28, 2022

justintaddei commented Sep 29, 2022

justintaddei commented Sep 29, 2022

RejownAhmed commented May 21, 2023

justintaddei commented Jun 7, 2023

NtchPlayer commented Jun 24, 2023

yldshv commented Aug 16, 2023

razorness commented Aug 17, 2023

yldshv commented Aug 17, 2023 • edited

justintaddei commented Sep 6, 2023

NtchPlayer commented Oct 21, 2023

justintaddei commented Oct 23, 2023

justintaddei commented Nov 7, 2023 • edited

!!! I'm not sure if this is a good solution. Please provide feedback if you don't like this approach !!!

justintaddei commented Nov 7, 2023 • edited

NtchPlayer commented Nov 7, 2023 • edited

justintaddei commented Nov 8, 2023

DamianGlowala commented Nov 8, 2023

amirsafaricg commented Dec 3, 2023

!!! I'm not sure if this is a good solution. Please provide feedback if you don't like this approach !!!

justintaddei commented Dec 5, 2023

justintaddei commented Dec 5, 2023

amirsafaricg commented Dec 5, 2023

justintaddei commented Dec 7, 2023

NtchPlayer commented Dec 7, 2023

justintaddei commented Jul 26, 2022 •

edited

yldshv commented Aug 17, 2023 •

edited

justintaddei commented Nov 7, 2023 •

edited

justintaddei commented Nov 7, 2023 •

edited

NtchPlayer commented Nov 7, 2023 •

edited