Upgrade to Vue 3.x

[gotjoshua]

Summary

What is the current strategy / timeline for upgrading Gridsome to use Vue Next (3.x)?

Request for Basic examples

I would love to see an official statement from the Gridsome team about Vue Next (3.x).

Would be great to have some examples of how to use the Vue Composition API ( related to #1270 ),
and some clear recommendations about when and why to do so.

Motivation

I assume that Gridsome will at some point upgrade to Vue 3.x and as my projects are rather young, I'd like to know how to be as prepared as possible for this (or even to use a Vue 3.x branch from the beginning)

[hjvedvik]

I have most parts in Gridsome working with Vue 3 in a local branch. The only thing that isn't implemented is vue-meta, which haven't published a package for v3 yet. But I hope we'll be able to do the upgrade soon.

Everything will work mostly like before, but we'll do some changes to the Client API (main.js, gridsome.client.js) because of how a Vue 3 app is initialized. And we'll add methods like usePageQuery(), useStaticQuery() to use <page-query> and <static-query> data in setup(). But $page and $static will still be available as computed properties.

And regarding the Composition API plugin for Vue 2. I don't think you'll need to change anything when Gridsome upgrades to Vue 3, except for any changes between that plugin and Vue 3 :)

[davestewart]

Congratulations! Would be great to hear some official communication about the general direction of Gridsome too; it's felt pretty quiet this year, especially in comparison to that other well-known Vue framework!

[tomtev]

@davestewart We will update the roadmap soon :) I know Nuxt has released a lot this year and created a buzz, but most of it has been what Gridsome already did. Both "full static" and "Nuxt content" is something Gridsome already had.

Our goal is to simplify Gridsome even more + make it ready for Vue 3 and release 1.0.

[christopherowen]

Is there a timeline for the Vue 3.0 implementation and the 1.0 release?

I'm currently evaluating Gridsome versus Nuxt for a new initiative to start this month - and this could be a defining feature.

[edm00se]

@christopherowen if you check in the project board, you can see the "in progress" lists a task for updating to vue 3. Additionally, the vue-next branch includes the gridsome package with vue at 3.0.0-rc.12, which is the next to most recent RC (6 days ago, gridsome's branch updated 5 days ago). As a non-contributor to / watcher of this repo, it looks like this is actively being worked on and is likely waiting on vue's official 3.0.0 stable release and validation after its release.

[lvmajor]

Just a quick comment here, it might be a good idea to pin this issue so that it's easily found by everyone wondering if/when vue 3 support is coming.

[scratchmex]

Vue 3 has been released and @hjvedvik have done an incredible work by migrating it (vue-next branch) so far.
Tell us, what we can do to help you? I think you must create a new project board and put the to-do things so we can help and get this project done.

[NickTheDev]

Yes is there any word on the project or has it been documented anywhere in the roadmap? It seems like the most necessary feature request currently and it's a shame to see Gridsome not jumping on Vue 3 as other frameworks have as otherwise Gridsome is practically perfect.

[hjvedvik]

Good idea, @scratchmex! At the moment, I think the only thing left to migrate is the vue-meta integration. Still waiting for a package that is compatible with Vue 3 from them. But there are probably other things that I'm not aware of, so I'll see if I can come up with a board one of the next days.

[christopherowen]

I think a branch is available here:
https://github.com/nuxt/vue-meta/tree/next

[sanscheese]

For the vue-meta blocker, will be worth keeping an eye on nuxt/rfcs#19

May open a valid approach.

[innocenzi]

https://github.com/vueuse/head just got released and I think it's a super nice solution.

[maulik-modi]

https://github.com/vueuse/head just got released and I think it's a super nice solution.

Does it have identical featureset, subset or superset of vue-meta?

[noxify]

Does it have identical featureset, subset or superset of vue-meta?

I checked just the docs and it seems only the titleTemplate is missing - But this should be easy to integrate a helper function which does the job :)

[AllanChain]

vue-meta@3.0.0-alpha.1 has been released 👀

Vue3 support for vue-meta is considered in mostly-stable-alpha stage.

[RehanSaeed]

Is the plan to wait for Vue-meta or can we jump to using Vue head instead?

[noxify]

@tomtev @hjvedvik which one do you prefer?

[maulik-modi]

@tomtev , @hjvedvik , please provide your preference, this issue has been sticking for quite long time.

[do-io]

BTW, vue-meta@3.0.0-alpha.2 has released
https://github.com/nuxt/vue-meta/releases/tag/v3.0.0-alpha.2

[do-io]

Is there a branch that I can help work on to help?

[mrseth]

Sorry to bother, any idea when Upgrade to Vue 3 will be complete. Love gridsome, just need Vue 3 for latest project! Thanks for all your work!

[pushand]

Trying to use Tailwind https://headlessui.dev/ and UI component but documents says works only on Vue 3 any workaround until gridsome is ready of Vue 3?

[Rocketpilot]

And gridsome.org still shows 0.7.23 as the latest release.

[RehanSaeed]

There is still hope!

[rylanharper]

There is still hope!

Definitely. Its always good to see Gridsome get updates. For what it is, this is still probably the best independent Vue-based project on Github (for plugin accessibility and template management --- i.e not just using markdown). It might be hard for the project to gain the attention/following it once had, but it still works very well and gets a lot "right" in terms of how easy it should be to setup and manage a front-end project. I think thats why most people who use Vue really want the best for this project.

[chrisrueger]

And gridsome.org still shows 0.7.23 as the latest release.

What is the process of creating a new release 0.7.24 ? @hjvedvik

[agaengel]

@hjvedvik any update on the release

[rylanharper]

I am not sure if others have are noticing the same, but I am still using gridsome 0.7.23 and my build is deployed (via Netlify) with Vue 2.7.10 which is good I guess.. Although it doesn't make much sense because I haven't upgraded anything on my project.. Anyone else noticing this or am I incorrect?

Here is the live site (you can check the sources and navigate to assets > js > vue-vendors): https://nikkoel.netlify.app/

What is shown:

/*!
 * Vue.js v2.7.10
 * (c) 2014-2022 Evan You
 * Released under the MIT License.
 */
 ... (vue code)

Btw I am pretty sure this project is not maintained any longer. I am slowly moving my workflow to Nuxt3 (for markdown users I would recommend Nuxt-Content or îles for Vue3).

[loilo]

@rylanharper Just a wild guess, but what you describe sounds like you don't commit your package-lock.json file. Technically, Vue 2.7 is compatible with Gridsome as it does not contain breaking changes, so if you're not being very specific with your dependencies (through such a lock file), Netlify will install the latest Vue 2.x version it can find.

[rylanharper]

@loilo Ah got it! Yep, that sounds like whats going on. Thanks for the info on that:)

[battoni]

I've build a lot of great stuff with Gridsome already. I hope this project does not get abandoned. 🙏🏽 Such a great concept and idea! ❤️

Any news @hjvedvik ?
Or, do we have a specific channel of updates? 🤔

[gypsy-gnomad]

I've 10 or more projects using Gridsome - but without Vue3 and not release in years - it's looking like abandon-ware whatever we feel about it - it's becoming obsolete and therefore legacy risk- do we fork, find alternatives or ?

[gypsy-gnomad]

Not sure who used to run this project - it's a testament to the tool that I'm not throwing it away and moving to Nuxt like my other sites.

I'm hoping to avoid this but our Gridsome is 3 years old - I fear the worst.

I know we don't want to believe it but 30 months is abandon-ware

GPT suggested 1-2 years - I suggest when cost of a work-around exceeds cost of change.

After all, those fixes are legacy that have to remediated.

@hjvedvik seems to have the lead - but hasn't commented on this thread since Nov 18, 2020 ?

I was worried for his health but he is still committing code :-D

@elevatebart has not updated Vue3 status in 30 months either.

Clearly something broken somewhere, priorities, resources, governance or more likely life just got in the way.

Anyone can fork ... but the cost of maintenance is high and inconsistency communication and updates is a risk unless workload is shared.

I will fund raise and sponsor a team to fork a supported-but-unofficial version.

My small team and I will certainly lend an hand.

We now have GPT - it can hack code too (we have all the 'template' stuffing code we need)

No one can take on the whole project without help - without interest, I may just integrate useful parts into Nuxt and move on.

Anyone interested ?

I'll give this thread 30 days to make traction then make my decision - reach out to gypsy at gnomad.cloud if you wanna sincerely and diligently engage on moving forward collaboratively with purpose :-)

[rylanharper]

@gypsy-gnomad I've always been a fan of Gridsome, as I've mentioned in this thread last year. It really helped me learn a lot as a developer when I first started out in 2019 dealing with APIs and all that. The early discord community was full of really helpful developers as well. However, while it's not official, I feel this is definitely a dead(dying) project and would recommend migrating to Nuxt3. Most CMS platforms are supported within the Nuxt(3) Modules ecosystem and if not, you can use nuxt-content for markdown or the nuxt-graphql-client module to connect to graphql (similar to what Gridsome offers).

[a-kriya]

https://www.npmjs.com/package/gridsome-vite was mentioned in this thread a few times, but those comments are not visible anymore. It's a good starting point, and I've figured out how to build a few pages with it by inspecting the source and following the errors. But without the docs and plugins, it's not feasible to build anything more than that. I've continued to stick with Vue 2.7 just to be able to use Gridsome after I tried the other frameworks. I'm willing to pool 2k USD for further official development of gridsome-vite with some rough timeline.

[gypsy-gnomad]

Thanks for Rylan Lovely words. I’ve budgeted &5k per quarter for 2 quarters now. Your the first but I have another to open. Regards

…

-Lee-

On Tue, 4 Apr 2023 at 11:42, Rylan Harper ***@***.***> wrote: I've always been a fan of Gridsome, as I've mentioned in this thread last year. It really helped me learn a lot as a developer when I first started out in 2019 dealing with APIs and all that. The early discord community was full of really helpful developers as well. However, while it's not official, I feel this is definitely a dead(dying) project and would recommend migrating to Nuxt3. Most CMS platforms are supported within the Nuxt(3) Modules ecosystem and if not, you can use nuxt-content for markdown or the nuxt-graphql-client module to connect to graphql (similar to what Gridsome offers). — Reply to this email directly, view it on GitHub <#1289 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3QGZ22W6SL6A22HQUHHXJTW7N4CBANCNFSM4PHM5YPQ> . You are receiving this because you commented.Message ID: ***@***.***>

[gypsy-gnomad]

Hi 👋 Took a look at gridsome-vite, I’ll be somewhat blunt - I’d not waste more than 5 seconds already invested on that codebase. Sorry. I need Gridsome with Vue3 and all security fixes. Slim down all dependencies and take default plugins to 1. That’s mandatory. Likely I’d whack the app Architecture into shape so it’s easy for future maintenance. Add more debugging and defensive coding to make building friendly. I’d want it complete by July - upgrade v3.x to track Vue current. And make everyone’s life easier. Daily builds and monthly version releases. Or I’m not wasting my money. I use a patched version for debugging, have fixed meta-static and got semantic SEO plugins for all major entity types already if that helps. I imagine a slim core and a bundle of -starters that include useful groups of plugins with all dependencies updated and security patches. They’d need to Vue3 complaint or not included. Most core plugins are agnostic to Vue3 anyway - file system, GraphQL, moat formatters. The one plug-in is the basic -starter. Need dependencies clean enough that they don’t conflict, so they all -starters gotta be updated for a release. It maybe fairer to rename the codebase with attribution coz I won’t be gentle. What do you think? If you still keen to contribute - I’m all ears. Especially around core bugs and any essential -starter for you. —

…

Reply to this email directly, view it on GitHub <#1289 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3QGZ23TXI7J6FTF2RGVWYLW7PUYJANCNFSM4PHM5YPQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[gypsy-gnomad]

Hi Rylan. I got my threads crossed. I sent two people the wrong response. So sorry …. I have a side project to use Nuxt as replacement. I’m willing to risk $10k towards Gridsome 3.x - I have one other $ contributor so I’m happy. Both have enough value to thrive. it’s kinda like helping out a old mate after tough patch. Maybe rename it too coz I won’t be gentle on the codebase. Anyways thanks for giving me good advice. Cheers

…

-L-

On Tue, 4 Apr 2023 at 11:42, Rylan Harper ***@***.***> wrote: I've always been a fan of Gridsome, as I've mentioned in this thread last year. It really helped me learn a lot as a developer when I first started out in 2019 dealing with APIs and all that. The early discord community was full of really helpful developers as well. However, while it's not official, I feel this is definitely a dead(dying) project and would recommend migrating to Nuxt3. Most CMS platforms are supported within the Nuxt(3) Modules ecosystem and if not, you can use nuxt-content for markdown or the nuxt-graphql-client module to connect to graphql (similar to what Gridsome offers). — Reply to this email directly, view it on GitHub <#1289 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3QGZ22W6SL6A22HQUHHXJTW7N4CBANCNFSM4PHM5YPQ> . You are receiving this because you commented.Message ID: ***@***.***>

[gypsy-gnomad]

Hi a-kriya Lovely words. I got some wires crossed earlier - Gmail or I got wonky. I fund a side project to use Nuxt as replacement. We use debug copy of Gridsome with fixed static-meta and all my SEO components using Vue3. I have a small team. I’m willing to risk $10k towards Gridsome 3.x - If I have one or more $ funders so I’m not demonstrably insane . I have a kinda plan: Hopefully simple enough to self fund once we’re done. Slim down core code. Remove all none critical plugins - aka all. Catalog of -starter bundles of security patched plugins. I’ll use my MVP for first -starter Funders (you and I ?) curate a -starter. We brand a new .org etc. set up a small foundation to reinvest profits coz … $X pro fee per year gives you votes on dev priorities and slack etc. It also sponsors your own pro-starter with a curated set of plugins and your branding. -pro-starter via push an initial commit to ”sponsors” GitHub org. If you still want to help fund - my asks are: I’d love your fave bugs to be fixed and your -starter plugins. What are they ? What is $X price range to sponsor a pro starter ? All funders should keep an eye on their money. Would you be willing and able to act as trustee of the foundation ? Hope that makes sense.

…

-Lee-

On Tue, 4 Apr 2023 at 19:46, a-kriya ***@***.***> wrote: https://www.npmjs.com/package/gridsome-vite was mentioned in this thread a few times, but those comments are not visible anymore. It's a good starting point, and I've figured out how to build a few pages with it by inspecting the source and following the errors. But without the docs and plugins, it's not feasible to build anything more than that. I've continued to stick with Vue 2.7 just to be able to use Gridsome after I tried the other frameworks. I'm willing to pool 2k USD for further official development of gridsome-vite with some rough timeline. — Reply to this email directly, view it on GitHub <#1289 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3QGZ23TXI7J6FTF2RGVWYLW7PUYJANCNFSM4PHM5YPQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[gotjoshua]

What will gridsome 3 have over Vitesse?

[gypsy-gnomad]

Every new major release locked in to Vue

[a-kriya]

For those still relying on this incredible framework, I have published a fork with the latest dev of this repo + some minimal fixes and updates on top. @hjvedvik had committed many updates incl. the switch to Webpack 5 and Vue 2.7, but just hadn't published another version since Nov 2020.

I mainly wanted to make things compatible with Node 18 as I got tired of export NODE_OPTIONS=--openssl-legacy-provider and dealing with some sharp/Python related issues on Windows.

To use the fork, update your package.json and gridsome.config.js as such (get the latest versions):

That's about it. If you run into errors, try a clean install.

[rylanharper]

@a-kriya would other current gridsome packages work with this as well? I have a fork of gridsome-source-shopify which has been updated (2023), but I've made no direct changes to its dependencies from the original

[a-kriya]

@rylanharper I took a look at the package.json of your fork and it looks fine. Some plugins have a peerDep of gridsome which should be updated, but yours doesn't. I'm also using a few different plugins, but only with the filesystem source/markdown files. They all work. It's possible that there are some minor breaking changes to the data APIs of Gridsome since 0.7.23, so you may need to account for them in your plugin if you run into any issues which should be apparent if you start your app with the forked Gridsome.

[Narretz]

@a-kriya Thanks for creating this fork! Do you have plans to open up / fomralize development, i.e maintaining a changelog and. accepting pull requests? Because I have patches applied to gridsome locally that I would like to integrate if I were to switch to your fork.

[a-kriya]

@Narretz I'd think most people have either moved on to other frameworks or will not be aware of this fork, so I only plan to maintain it for personal use. My objective is to keep it compatible with the current Node LTS, and fix any bugs I come across. I can also accept PRs for bug-fixes and publish them in a release, but that's about it. If that sounds okay, you're welcome to submit your patches.

[a-kriya]

Some updates I want to share with those still here. I've been modernizing my fork of this project with the following changes already made:

• fully migrate codebase from cjs to esm for core and all sub-packages
• upgrade dependencies of all packages (barring some breaking major ones)
• switch from yarn classic to latest npm (w/ node v20)
• switch from jest to vitest with all unit tests passing

All the changes have been made in a way that lead to minimal breaking changes downstream so the docs will stay relevant. This is still a WIP and the branch is accessible at https://github.com/a-kriya/gridsome/commits/esm/. I'm writing here as a call for help: there are some issues that need to be resolved before the basic Gridsome commands can be tested. With the above changes, it's easy to get started. Simply clone, checkout the esm branch, run npm i and jump in the rabbit hole. I'm currently trying to fix all the e2e tests, so the npm test command is set to run project-simple.build.e2e.js. I will publish when all issues are resolved.

[chrisrueger]

What do you think about getting in touch with the maintainer asking if your repo can be the successor? Whatever this could mean technically, i don't know.

[Narretz]

@a-kriya Cool to see that your fork is still going. As for your call of help, I think it would be great if you could be a bit more specific, e.g. open a list of issues in your fork. Otherwise it's kinda cumbersome to see what exactly is missing and may lead to duplicated efforts as well.

[a-kriya]

What do you think about getting in touch with the maintainer asking if your repo can be the successor?

@chrisrueger The author of Gridsome has not interacted here in over 3 years now. If anyone's interested in my work, they can follow the fork. I am going to stop posting here. My intention is to improve the DX, fix some bugs that have been filed here, migrate to Vue 3 (merging changes that have already been made in vue-next-* branches here), and possibly switch from Webpack to Vite. This will be on my timeline, to help with my projects and my learning, so no promises and why it won't be true to call it a successor, just a fork.

@Narretz Good idea. I've enabled the Issues section and filed a ticket.