Advanced
Local Debug
Validate your customization in local development.
Purpose
This section is dedicated to developers.
The goal is to validate your customization in local before publishing on production.
It can help if:
- you want to create a
nuxt.schema.tsfile and generate the appropriate interface on Studio. - you want to integrate Vue components and ensure edition is working as expected in the editor.
Tutorial
- Start by importing your project on Studio.
- Clone your repository on local.
- Ensure you are using the @nuxthq/studio module
- 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.- 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 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 and your Vue components are available with their props and slots in the editor.
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.