Nuxt 3 Compatibility

[madc]

Currently, this projects seems to by compatible with Nuxt 2 only. What would be necessary to get it to work in Nuxt 3?

I had a quick look at the code, but could not get it to work at all. I'd be happy to prepare a PR, but need some pointers in the right direction.

Thanks.

[justintaddei]

I've been meaning to look into this. I know how to update it for compatibility with Nuxt 3 but not how to maintain backwards compatibility with Nuxt 2. This is an issue I'm already looking into this for my v-wave project. There are steps in that issue for a workaround.

https://github.com/justintaddei/v-wave/issues/351

[xxRockOnxx]

@justintaddei tried following the workaround but it doesn't work. upon importing the package, illusory would cause document is not defined error.

[DamienToscano]

Hi @justintaddei , did you have any news about Nuxt 3 compatibility ? Thanks a lot

[justintaddei]

Nuxt 3 support for this plugin will follow the same strategy as v-wave. The plans for which are detailed in this comment:
https://github.com/justintaddei/v-wave/issues/351#issuecomment-1581274328

v-shared-element@v3.x.x will continue to support Nuxt 2 and features will be backported where possible.

v-shared-element@v4.x.x will live on the master branch and will support Nuxt 3

[Josepdal]

@justintaddei tried following the workaround but it doesn't work. upon importing the package, illusory would cause document is not defined error.

You have to load the plugin in the client side.

In nuxt you can just rename the file name and add client: sharedElement.client.js

I have the following code:

import {
  SharedElementRouteGuard,
  SharedElementDirective
} from 'v-shared-element'

const router = useRouter()

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('v-shared-element', {
        ...SharedElementDirective,
        getSSRProps(binding, vnode) {
            return {}
        }
  })

  router.beforeEach(SharedElementRouteGuard)

But it still not working for me, maybe I did something wrong. I am getting the following error:

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'getSSRProps')

UPDATE: Apparently you have to create also the server side plugin as per docs:

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.

I have the following plugins so:

sharedElement.client.js

import {
  SharedElementRouteGuard,
  SharedElementDirective
} from 'v-shared-element'

export default defineNuxtPlugin((nuxtApp) => {

  nuxtApp.vueApp.directive('shared-element', {
        ...SharedElementDirective,
        getSSRProps(binding, vnode) {
            return {}
        }
  })

  nuxtApp.$router.beforeEach(SharedElementRouteGuard)
})

sharedElement.server.js

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('shared-element', {})
})

While there is no error, it also does not work as expected. There is no transition happening.

UPDATE 2: I am checking the examples, I see that the directive translates to data-illusory-id="" in the DOM. This is not happening to me, something might be wrong.

UPDATE 3 AND TEMPORARY WORKING SOLUTION

sharedElement.client.js

import { SharedElementRouteGuard, SharedElementDirective } from 'v-shared-element'

export default defineNuxtPlugin(({ vueApp, $router }) => {
  SharedElementDirective.install(vueApp)
  $router.beforeEach(SharedElementRouteGuard)
})

sharedElement.server.js

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.directive('shared-element', {})
})

[yldshv]

@Josepdal Update 3 works perfect!

[justintaddei]

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.

[justintaddei]

Nuxt 3 support is under active development for v-wave. There have been some hiccups that I'm working out. Once support is figured out for that plugin I will add nuxt 3 support for this project. If you'd like to follow the progress on this, please watch this thread: https://github.com/justintaddei/v-wave/issues/351

[justintaddei]

Nuxt 3 support is live for v-wave and will be coming to this project at the beginning of next week, provided everything goes smoothly with getting the route guard and mixin to work. This will be a breaking change for Nuxt 2 projects but will allow Nuxt 2 users to use the latest version of v-shared-element (contrary to the previous plan outlined here)

For Nuxt 2 users wishing to upgrade to v-shared-element@^4.0.0, you must change your nuxt.config.js as follows:

// nuxt.config.js for Nuxt 2

// before:
export default {
    modules: ['v-shared-element/nuxt'],
}

// after:
export default {
    modules: ['v-shared-element/nuxt/v2'],
}

Nuxt 3 users will continue to use 'v-shared-element/nuxt'