Studio
Local Debug
Validate your customization in local development.
Purpose
The goal of this section is to explain how 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 custom Vue components and ensure edition is working as expected in the editor.
Tutorial
Import your project on Studio
Clone your repository on local
Enable Nuxt Content preview in development
nuxt.config.ts
export default defineNuxtConfig({
content: {
preview: {
// force module initialization on dev env
dev: true
}
}
})
Launch your app using your dev command with --tunnel to expose it to the internet
Terminal
npx nuxt dev --tunnel
Ensure the metadata file has been generated
__preview.json file should accessible from https://your-localtunnel-url/__preview.json
Copy the tunnel URL and copy it in the self-hosting section of the deployment tab on Studio platform
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 synchronize the Studio interface by calling the Sync meta action from command menu K . A refresh of the Studio app should also apply the update.