Learn Nuxt with a Collection of 100+ Tips!

ngrok
@nuxtjs/ngrok

ngrok exposes your localhost to the world for easy testing and sharing! No need to mess with DNS or deploy just to have others test out your changes.

@nuxtjs/ngrok

Nuxt ngrok

npm versionnpm downloadsLicenseNuxt

Easily expose your Nuxt application to the internet with ngrok.

Features

  • Effortless Integration: Set up ngrok with just one line of configuration.

Setup

  1. Install @nuxtjs/ngrok:
npx nuxi@latest module add ngrok
  1. Add @nuxtjs/ngrok to the modules section of nuxt.config.ts:
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/ngrok',
  ],

  ngrok: {
    // module options
  },
})

That's it! You can now use ngrok in your Nuxt app ✨

for Nuxt 2 support, please use @nuxtjs/ngrok@2.0.0 and follow the instructions at v2.nuxtjs.org

Options

Add authorization and more using the module options:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/ngrok',
  ],

  ngrok: {
    authtoken_from_env: true, // Use NGROK_AUTHTOKEN environment variable
    // authtoken: 'your_ngrok_authtoken', // Or use this option
    auth: 'username:password',
    domain: 'your_custom_domain',
    production: true,
  },

})

learn more about the module options.

Usage

Now if you run your Nuxt application, you should see a message in your console that shows the ngrok URL.

 Ngrok connected at https://your_ngrok_url

Contribution

Local development
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Release new version
npm run release