Blog

Let’s get social & connect together.

Author photo

Ajay Thakur

17 April 2023

Integrate AdminBro inside Nuxt Server Middleware in 3 minutes

Integrate AdminBro inside Nuxt Server Middleware in 3 minutes

Let’s add some dependencies first


Step 1: Install the AdminBro along with the express plugin

Using npm

npm install admin-bro @admin-bro/express

Using yarn

yarn add admin-bro @admin-bro/express

If you don’t have express or express-formidable already installed then you need to add that too, because these are peer Dependencies of @admin-bro/express


Step 2: Create an express router it will help you to handle all AdminBro routes

Let’s create api folder in nuxt root directory after that create index.js inside it.

// api/index.js

const AdminBro = require('admin-bro')
const AdminBroExpress = require('@admin-bro/express')

const express = require('express')
const app = express()

const adminBro = new AdminBro({
  databases: [],
  rootPath: '/api/admin',
})

const router = AdminBroExpress.buildRouter(adminBro)

app.use(adminBro.options.rootPath, router)
app.listen(3000, () => console.log('Now go to localhost:3000/api/admin'))

Now add /api folder to nuxt.config.js in middleware.

...
serverMiddleware: {
  '/api': '../api'
}
...

Note: AdminBro middleware should be added on top. Because other middleware can override routes.

Hurray, we made it, isn’t it quick?


#nuxtjs #nuxt #admin-bro #nodejs #expressjs 

Share the article