Local Debug

Validate the design of your config interface.

ensure app config ui generation from schema

The purpose of this tutorial is to validate that your nuxt.schema.ts file is generating the appropriate interface on Studio.
  1. Start by importing your project on Studio.
  2. Clone your repository on local.
  3. Ensure you are using the @nuxthq/studio module:

Open a terminal within your repository folder and execute the following command:

npm i -D @nuxthq/studio

Once installed, add the module to your nuxt.config.ts file and enable the Studio module:

export default defineNuxtConfig({
  modules: [
  // force module initialization on dev env
  studio: {
    enabled: true
  1. Go on the Selfhosting section from your project page and copy your verification token:

selfhosted section desployment

  1. Create a .env file and copy your token value:
  1. Launch your app using your dev command with --tunnel to expose it to the internet:
npx nuxt dev --tunnel
  1. Ensure the __studio.json file is accessible from https://your-localtunnel-url/__studio.json

local tunnel expose

  1. Copy the tunnel url and copy it in the selfhosting section.

Local Tunnel on 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 requires a restart of the Nuxt dev server. Once the server has restarted you can syncronized the Studio interface by calling the Sync meta action from command menu K. A refresh of the Studio app should also applies update.