DEV Community

Alan Schio
Alan Schio

Posted on

1

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay