Skip to content
pinegrow.com
Docs menuVue Designer
Vue Designer

Nuxt

Updated

Nuxt provides is an amazing Vue Meta-framework that provides one of the best developer experience both via features and it’s innovative set of toolsets.

On this page

Vue Designer supports visual editing of Vue components in all Nuxt apps through the Pinegrow Nuxt Module, which is a wrapper on top of Pinegrow Vite Plugin.

Just follow the instructions in the Config Panel when you open your Nuxt apps in Vue Designer, similar to adding the Pinegrow Vite Plugin in the Vite guide.

The start-screen includes quick-start templates, sample apps such as Happy Paws, and also showcases forks of apps maintained by the Nuxt team, namely the movies and hackernews apps.

These two apps are good examples of how you can simply add the Pinegrow Nuxt Module, and open your project in Vue Designer to live-design your Vue components.

Vue Designer preview of a Fast X movie page with the NuxtLink selected in the component tree and the Properties panel for the link.

The following are some special Nuxt features in Vue Designer.

Nuxt SFC templates

Right-click on your components/pages folder, choose Nuxt in the vertical sidebar, and select the template to add it to your project.

Vue Designer project tree with a context menu on the pages folder offering Add new folder, Add new component and Create new file.
Add a new component dialog with Tailwind CSS 3.3 and Nuxt 3.6 templates, such as NewComponent.vue and [slug].vue.

Nuxt Directory conventions

When adding a new component or page from the SFC templates to your project either via the Vue menu or from the current page tree, the vue files are automatically added to the ./components or ./pages folder following the Nuxt convention.

Vue Designer Vue menu open with Use Composition API in New Component checked and Page selected, with an Add new page at ./pages tooltip.
Vue Designer HeroSection selected in the component tree, with a context menu offering Insert, Convert into a new component and Insert new component.

Nuxt Component Libraries

The following component libraries are automatically added and displayed in the Library Panel for easy drag-and-drop.

  1. Nuxt Components shipped with Nuxt (for eg, NuxtLink) are displayed in the Library Panel for easy drag-and-drop.
Vue Designer Insert element panel listing Nuxt components such as NuxtLayout, NuxtLink and NuxtPage.
  1. Nuxt Content components are automatically added and displayed in the Library Panel, if your project has @nuxt/content installed.
Vue Designer Insert element panel with the Nuxt Content component list, such as ContentDoc and ContentRenderer.
  1. Nuxtlabs/UI component library is automatically added and displayed in the Library Panel, if your project has @nuxthq/ui installed.
Vue Designer Insert element panel with the Nuxt UI component list, such as UAvatar, UButton and UCard, and a Nuxtlabs UI components callout.

Other Nuxt Packages

Config Panel also displays instructions to add other key packages within the Nuxt ecosystem like Nuxt Icon, Nuxt Devtools etc.,

Refer to Icon Picker and Devtools guides for more details.