Developers
Local Debug
Validate the design of your config interface.
The purpose of this tutorial is to validate that your
nuxt.schema.ts file is generating the appropriate interface on Studio.- Start by importing your project on Studio.
- Clone your repository on local.
- Ensure you are using the
@nuxthq/studiomodule:
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:
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxthq/studio'
],
// force module initialization on dev env
studio: {
enabled: true
}
})
- Go on the Selfhosting section from your project page and copy your verification token:
- Create a
.envfile and copy your token value:
NUXT_PUBLIC_STUDIO_TOKENS=<YOUR_TOKEN_VALUE>
- Launch your app using your dev command with
--tunnelto expose it to the internet:
Terminal
npx nuxt dev --tunnel
- Ensure the
__studio.jsonfile is accessible fromhttps://your-localtunnel-url/__studio.json
- Copy the tunnel url and copy it in the selfhosting 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.