-
Notifications
You must be signed in to change notification settings - Fork 247
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue 3 Plan (Recommendations) #558
Comments
Hey, I have been working on vue-meta v3 for some while now but am not yet ready to release an alpha yet. You can track some of my work here (mostly the new API) but everything is still under heavy development so changes will happen ;) |
Looks nice, that's a good standard API for the composition stuff. Thanks, @pimlie! Appears that production use for Vue 3 is gonna take a LOT longer (~12 months?) when you consider that all the libraries are going to have to catch up. |
@pimlie just a request, but would it be possible to get an alpha that has the "old" object-based API as well as new Vue 3 types. Happy to wait on composition API stuff, but the other stuff is blocking our migration to Vue 3. If there is a way I could contribute I'd be happy to do it. |
Hey, I have been thinking about this but I'd rather not have to spent time supporting two versions for Vue v3. It isnt the time developing a vue-meta v2-based Vue3 version what worries me, it worries me much more that I then also have to support that for the coming time. And that would only take time away from developing a good/proper revamp of vue-meta for v3. Im hopeful I will be able to release an alpha in a month or so. It will for sure not take 12 months ;) |
Great! Excited to see it. As a thought, I HIGHLY recommend you don't underestimate the importance of backward compatibility. If you plan on changing the API completely, you might as well start a new plugin rather than iterate this one. How do I know this? My old company had 60k paying customers, I made this mistake. |
I fully agree with you, the whole discussion about the composition api showed this too. That said, we cant deny that the current approach in vue-meta is somewhat flawed. And Vue3 is giving us new possibilities we didnt had in Vue2. It would be stupid to not use those possibilities and/or fix those flaws just for backwards compatibility. Ofc I will try to maintain as much backward compatibility as possible, but cannot promise 100%. My main goal is to at least support the old data structure |
@pimlie also please take into account this new cool syntax with SFC Script Setup! 😎 |
@ux-engineer Hey thx, but as far as I am aware thats just syntax sugar for Vue3's setup method? Or is there more to it? If not, then we will already support it (see the next branch link above, the vue-router example in that branch shows the new api) |
@pimlie that's correct, it is just an another way of writing code with Composition API. I should have defined my comment more in saying that we would like see the final examples in docs to include also this cool syntax 😋 Already glanced through your next branch's example...looking good so far 👍 I hope you are getting this new version out soon after Vue 3.0 release. Currently there are a few bottleneck packages that we need to wait for to support Vue 3 before we can go through the upgrade process ourselves... In our case it's mainly with Bootstrap-Vue, which have told they will release support 'a few days' after 3.0 comes out. |
Yeah, me too. Was writing tests yesterdays but ran into an issue with merging arrays which I need to look into. Was trying to omit that For the rest the biggest missing features atm are:
|
@pimlie really excited for vue 3 support. Is there a way we could test out the next branch version? |
Vue 3.0 is stable now, jej! 🎉 How is the upgrade plan looking like? |
Following this thread, waiting excited the next release |
Please refrain from posting messages to just follow this thread, instead you can click on the Subscribe button in the right bar to follow this thread. Unfortunately I have no new updates, had some setbacks so am still working out some kinks. |
I've juste made some editing to set vue3 compatibility on my local branch. |
@Areskul What's your temp solution? |
It's now also possible to have a <teleport to="head">
<title>{{ pageTitle }}</title>
<meta property="og:description" :content="pageDescription">
<template v-if="img">
<meta property="og:image:url" :content="img.url"/>
...
</template>
</teleport> and instead of the |
@n-kort Thank you for the valuable info! |
@n-kort That is exactly how vue-meta v3 will work, just check the next branch ;) The added value for using vue-meta would be in managing meta data for more complex setups where your meta data originates from multiple components and not in a single place. |
I think this method not correct, data to head become after load page, i use SSR and for google is problem. If i set data without teleport all work fine. Vue 3 + ssr |
Gridsome is waiting on vue-meta to support Vue 3 in order to release its new version. Maybe a minimum viable support for vue 3 before making breaking changes? I think you don’t need to use all vue 3 features to release its suppor. What do you think? |
Dont have a nice update unfortunately but just want to mention that I hear you all and spending as much time as I can/have available on vue v3 support. |
@pimlie though I'm impatient to have a vue3 compatible version, take the time you need and don't sacrifice your health over this. 😉 |
@pimlie Thanks for your work on this! We’re eagerly waiting for Vue 3 support too, it’s what holds us back from porting tiptap over to Vue 3. 👀 Anything we can do to help here? Would love to contribute! Feel free to reach out in private if you think that’s better: humans@tiptap.dev |
@hanspagel Thanks for the offer and sorry for the long delay. I was hoping to publish an alpha release today but due to some things taking me longer then expected (mostly TS related) I will have to postpone that. But the vue-router example on the next branch should be fully working now (you can start it with Whats still left to do for an alpha release:
What would be nice to have before the alpha release
What is still blocking from a beta/prod release:
Known bugs that could be blocking:
|
SSR support is, for me, the most crucial feature. For us, the largest reason we do SSR is to render the metatags so they can be picked up with scrapers and bots. |
What about this new repo - https://github.com/vueuse/head (Document head manager for Vue 3. SSR ready) |
I have finally released a first alpha version: https://github.com/nuxt/vue-meta/releases/tag/v3.0.0-alpha.0 Please expect it to be very rough still and there are no docs yet, but it is in good enough working condition that we can validate the API and see if there are still major core features missing. If someone wants to help then I could use some help with adding the missing types and publishing them on build. |
@pimlie For useApi you reference the ./examples/vue-router HOWEVER the code within ./examples/vue-router doesn't use the new 'vue 3' vue-cli+ts createRouter syntax. Looks something like this: import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' I can't use the vue-router example (in typescript) -- because: Fwiw, the way vue-gtag did the router integration using the "trackRouter()" method was stupid simple to use, I'm assuming something similar could be built for vue-meta (in the meantime i'll see what I can do) https://matteo-gabriele.gitbook.io/vue-gtag/v/next/router-tracking |
@elasticdotventures Did you check the vue-router example under the next branch? In this file I use createRouter: https://github.com/nuxt/vue-meta/blob/next/examples/vue-router/main.js Something like As v3 is using Proxies and will only update the data thats really changed, I dont think we need Because we never found/implemented a generic solution for detecting (and then waiting for) page transitions (which made TLDR, unless we find a generic solution to detect and then wait for page transitions so we can implement a correctly working |
Just released alpha.2, see: https://github.com/nuxt/vue-meta/releases/tag/v3.0.0-alpha.2 and the updated readme. @elasticdotventures You could probably use the That said, if you would call the returned unmount hook manually then it would also get called ofc: const { unmount, onRemoved } = useMeta(/* */)
onRemoved(() => /* do something */)
unmount() // something happens |
@pimlie any update on when this upgrade might get released in non-alpha form? I'm looking to start using Gridsome for new projects and would love to use Vue 3, but their Vue 3 migration is hung up on this package apparently. Anything I could do to help with this issue? |
@millansingh The two major todo's left are v2 compatibility and docs. Am working on the first, when thats done we could at least move to beta. In the mean time I would love to get more feedback (both positive as negative). Also if anybody has a suggestion for how to remove the need for adding the metainfo component and render the metadata portals without it that would be great (#664) :) |
did something similar with teleport and title as well, maybe my solution can inspire you to find a solution for your needs |
Hey guys,
Is there is a plan regarding this plugin and Vue3?
Tried out v3 this weekend and this plugin was one of the sticking points as its integrated into the next Factor (Headless CMS)...
Primarily there are issues with installation and types due to the changes around
Vue
>createApp
and so on...The text was updated successfully, but these errors were encountered: