Upgrade to Nuxt v3

[ajcwebdev]

Nuxt Version Three

As of just a couple days ago we can now upgrade to the new (years in the making) version 3.0 of Nuxt. There's a lot of really interesting features and improvements the Nuxt team has been working on including:

• Vite by Vue.js author, Evan You is now included as a replacement to Webpack
• Nitro is a new server engine built with h3 which is a high performance http framework
• Nuxt Bridge provides the ability to incrementally migrate Nuxt v2 applications to v3.

Do we need Nuxt Bridge?

Nuxt Bridge is a forward-compatibility layer that lets you use Nuxt v3 features in a Nuxt v2 project. Because of the relative simplicity at this time of the sample application, my hunch is that we can simply upgrade to v3 without having to change a single line of code. Only way to truly find out though is to actually implement the upgrade and see if anything breaks.

Changes to development commands in package.json

Despite my optimism for the Nuxt code itself remaining stable, it does appear that the dev commands and package.json will end up slightly modified since Nuxt v3 is now using Vite instead of Webpack.

Nuxt v3 has two main commands

1. dev - Start the development server
2. build - Build production assets

Nuxt v3 becomes a dev dependency with the new Nitro server, so you will need to add two commands in your package.json:

"scripts": {
  "dev": "nuxi dev",
  "build": "nuxi build",
}

[codiini]

Hi @ajcwebdev, can I take this up?

[ajcwebdev]

Go for it!

[codiini]

@ajcwebdev I think I've successfulyy done the migration, but then I try to run the project and I still get the Cannot read property 'mountains' of undefined error. I've followed the instructions and added my API key and Endpoint but the error still persists. Could you please help me figure it out?

[ajcwebdev]

@codiini What happens when you run stepzen start? Do you see a GraphiQL editor on localhost:5000/api/stepzen-nuxt that is able to receive queries?

Also make sure you have pulled the most recent commits on main, the environment variable names were recently changed.

If you save your work on a new branch on your forked version I can review it more easily.

[codiini]

@ajcwebdev When i run stepzen start I do get redirected to the GraphQL editor but I also get an error Could not load https://stpetebeach.stepzen.io/stpetebeach/hello/__graphql. I have updated my own fork of the project, you can review here: https://github.com/codiini/stepzen-nuxt

[ajcwebdev]

Interesting, are you sure that you're in the root directory of the project when you run stepzen start? The provided URL should be: https://{username}.stepzen.net/api/stepzen-nuxt-tutorial/__graphql, which in your case would be https://stpetebeach.stepzen.net/api/stepzen-nuxt-tutorial/__graphql. This is specified in the stepzen.config.json file.

I checked out your fork and was able to run the example successfully, so the Nuxt 3 upgrade seems to be working fine, we just need to figure out what's going on with your StepZen setup.

[codiini]

Turns out the error is from me not running stepzen start in the root directory of the project. The GraphQL editor seems to work now, but when I visit my poject URL I get an error

[ajcwebdev]

That means that you have not included your API key in the .env file. If you visit your account page on StepZen you will see an account name, admin key, and API key. You want to include the API key in your .env file like so:

STEPZEN_API_KEY=stpetebeach::stepzen.net+1000::xxxx
STEPZEN_ENDPOINT=https://stpetebeach.stepzen.net/api/stepzen-nuxt-tutorial/__graphql

[codiini]

I had done this already, i find it weird that it doesnt work

[ajcwebdev]

Maybe you're including the Admin key instead of the API key? If you want to send me your account information and what's contained in your .env I can try it on my machine, my email is anthony@stepzen.com.

[codiini]

I've double checked that and I used the API key. I have mailed you my details to help me check again

[ajcwebdev]

Figured it out, your endpoint was set to

• https://stpetebeach.stepzen.net/stepzen-nuxt-tutorial/users/__graphql
• Instead of https://stpetebeach.stepzen.net/api/stepzen-nuxt-tutorial/__graphql

[codiini]

Okay, it works now. Thanks! can i send in another PR that fixes that part of the docs that has the wrong URL? Point of error Image attached below

[ajcwebdev]

Sure thing, I see how that can be confusing.

[codiini]

@ajcwebdev I've created a PR for this issue here https://github.com/stepzen-samples/stepzen-nuxt/pull/14

[ajcwebdev]

Closed by #14