Create a Nuxt Bridge App

schirrel

Alan Schio

Posted on June 21, 2023

Create a Nuxt Bridge App

Even tho the Nuxt docs is pretty good, i hadn't found a single tutorial on creating a nuxt bridge app, so why not create right? Docs is good, but sometimes is need a more straight forward thing!

Step 1 - Create a Nuxt 2 App

yarn create nuxt-app nuxt-bridge-app`
Enter fullscreen mode Exit fullscreen mode

You can select the config of your app as you like, mine was:

Nuxt CLI Setup

After install we can run execute yarn dev and see the app running

New app running on localhost

Step 2 - Upgrade to latest Nuxt 2

As stated at the migration docs we need to use the latest Nuxt 2 release, so far today (16/03/2023) the version is 2.16.2.
We replace the version on package.json and once again execute yarn install, now our main dependencies are:

  • "nuxt": "2.16.2",
  • "vue": "2.7.10",

Step 3 - Install Nuxt Bridge

The docs says to install as

yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

Enter fullscreen mode Exit fullscreen mode

Step 4 - Update scripts at package.json

Now we are going to use nuxi instead of nuxt to run and build the app.
At your package.json replace the content at the script's prop to:

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

Enter fullscreen mode Exit fullscreen mode

Step 5 - Update Nuxt config

Now update the nuxt.config file to use Nuxt Bridge, import defineNuxtConfig from '@nuxt/bridge' and wrap it arount the config object:

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // Your existing configuration
})

Enter fullscreen mode Exit fullscreen mode

If you are using typescript you need to add the below line at your tsconfig:

 "extends": "./.nuxt/tsconfig.json"

Enter fullscreen mode Exit fullscreen mode

And disable typescript from bridge at nuxt.config file to avoid conflict between the Ts on bridge and on your configuration:

bridge: {
    typescript: false
  },

Enter fullscreen mode Exit fullscreen mode

Now you can simply run again yarn dev and now you are using Nuxt Bridge on you project

Running nuxt app with Bridge

The source code is on https://github.com/schirrel/nuxt-bridge-app

💖 💪 🙅 🚩
schirrel
Alan Schio

Posted on June 21, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related