Nuxt

Let’s get started with Nuxt on Runway.

In this tutorial, we’ll create a new Nuxt app and add a route to it that responds with JSON. For the benefit of this tutorial, we’ll build something that requires node on the server to demonstrate Runway’s flexibility when it comes to handling Nuxt apps.

Setup

Let’s create a new project (and select npm as our package manager):

npx nuxi@latest init
...

Now that we have a project, we add a /api/hello route in server/api/hello.ts:

export default defineEventHandler((event) => {
  return {
    hello: 'world'
  }
})

Save the file, and start the dev server with npm run dev. Going to http://localhost:3000/api/hello will yield {"hello": "world"}.

TypeScript on Runway

Nuxt supports TypeScript, which is a superset of JavaScript that adds static typing and allows developers to catch errors at compile-time instead of runtime. TypeScript compiles down to JavaScript, which makes it compatible with Runway.

Deploy to Runway

Let’s create an application on Runway so we can set (build) config:

$ runway app create
INFO    checking login status                        
INFO    created app "funny-laboratory"                 
create app funny-laboratory: done
next steps:  
* commit your changes  
* runway app deploy  
* runway open

Configure

By default a Nuxt project will expect node to be available. There are other options (e.g. static hosting) but for this tutorial, we will continue with the defaults.

When you run npm run build Nuxt will produce the result in an .output directory. There are of course options to adjust the path, but Runway can work with what Nuxt has giveth.

Let’s configure Runway to keep .output after the build stage:

$ runway app config set BP_KEEP_FILES=.output

Continue by adding a npm run start command:

$ npm pkg set scripts.start="node ./.output/server/index.mjs"

Commit

You may have to commit all the changes done to the files now.

Configure the port — we’ll use Nuxt’ default port of 3000:

$ runway app config set PORT=3000

Inspect the app config in all its glory:

$ runway app config ls
INFO    showing configuration for app "funny-laboratory" 
     Name               Value           
BP_KEEP_FILES  .output                  
PORT           3000

Deploy

Finally:

$ runway app deploy && runway open

Congratulations! Your built and deployed a Nuxt app to Runway! 🫡

Company