Advanced

Local Debug

Validate your customization in local development.

browser screen with icon settings

Purpose

This section is dedicated to developers.

The goal is to validate your customization in local before publishing on production.

It can help if:

Tutorial

  1. Start by importing your project on Studio.
  2. Clone your repository on local.
  3. Ensure you are using the @nuxthq/studio module
  4. Enable the Studio module in development
nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxthq/studio'
  ],
  // force module initialization on dev env
  studio: {
    enabled: true
  }
})
Do not push your nuxt.config.ts modification on production.
  1. Launch your app using your dev command with --tunnel to expose it to the internet:
Terminal
npx nuxt dev --tunnel

local tunnel expose

  1. Ensure the __studio.json file is accessible from https://your-localtunnel-url/__studio.json
  1. Copy the tunnel URL and copy it in the self-hosting section.
That's it! You should now be able to access Studio UI and confirm that your config interface has been successfully generated.
Any modification of your nuxt.config.ts file or any changes in a Vue file require a restart of the Nuxt dev server. Once the server has restarted you can synchronized the Studio interface by calling the Sync meta action from command menu K. A refresh of the Studio app should also applies update.