Alan Schio
Posted on June 21, 2023
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
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
November 10, 2023