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`

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

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

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

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"
  }

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
})

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

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

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

bridge: {
    typescript: false
  },

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

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