Skip to content
pinegrow.com
Docs menuVue Designer
Vue Designer

îles

Updated

îles is a joyful static site generator that’s batteries included, supports the Islands architecture with islands made of multiple frameworks such as Vue, Preact, SolidJS, Svelte and Plain Javascript.

On this page

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

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

The start-screen includes quick-start templates and sample apps such as Nature’s Delight. In fact, the îles documentation site itself is an amazing îles app that contains a wealth of wonderful components with an excellent architecture.

To learn more about hydration directives and how îles can make your apps super-fast, refer to the official îles documentation.

Vue Designer Hero section of a Natures Delight page with the HeroSection selected and the client:load hydration directive set to true.

The following are some special îles features in Vue Designer.

îles SFC, JSX/TSX and Svelte templates

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

Project tree context menu for the src folder with Add new component, Add new folder and Create new file options.
Add a new component to your project dialog with templates such as NewComponent.vue, NewPage.vue and [slug].vue for the iles setup.

îles 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 ./src/components or ./src/pages folder following the îles convention.

Vue Designer Vue menu open with Use Composition API in New Component checked, plus Add New Component and Hydration Strategy Override options.
Vue Designer context menu on the main element offering Insert new component, Convert into a new component, Classes and Properties.

îles Hydration Directives

With îles apps, in the Props Panel, additionally displays the various hydration directives that can be applied to your Islands.

Vue Designer Properties panel for the HeroSection with client:load set to true and hydration directives listed.

With îles apps, the Vue menu, includes a hydration strategy override that will automatically load your components, so that the Component App Tree displays all the components within Vue Designer. This is very helpful during development.

Vue Designer Hydration Strategy Override submenu with client:load checked, beside the Vue menu items.

Interesting Fact: Your îles app is an SPA during development, and MPA in production!