Skip to content
pinegrow.com
Docs menuVue Designer
Vue Designer

Vite

Updated

Live Designer module of Pinegrow Vite Plugin enables visual editing of Vue Single-File Components (SFC) in Vue Designer.

On this page

Let’s scaffold a new Vue project with Tailwind CSS by following the official documentation and opening it in Vue Designer. We highly recommend following this guide step-by-step.

You can watch our short guide, or scroll down past the video for step-by-step instructions.

Click on Tailwind CSS in the Start a new project dialog to open the official documentation.

Start a new project dialog with Tailwind CSS selected, and a callout reading Click to open official docs above the Tailwind CSS docs link.

Follow the instructions in the official documentation to create a new Vite-powered Vue project with Tailwind CSS.

Tailwind CSS documentation page titled Install Tailwind CSS with Vite, on the Using Vue tab with the npm create vite command.

Here is an example of a scaffolded project with the dev-server already running.

VS Code window with package.json open and the terminal showing the Vite dev server running at localhost:5173, beside a Vite and Vue preview.

Now, click the Open button to open your newly created project folder in Vue Designer.

Vue Designer welcome screen with a callout reading Click to open your project folder, above the Open button and project thumbnails.

Setup

The Config Panel will automatically pop-out with instructions to add the Pinegrow Vite Plugin to your Vite config.

Vue Designer Config panel Packages tab with Setup showing Action Required, and a callout for the setup status and summary.

Scroll down if needed and follow the instructions to install and configure the plugin.

Vue Designer Config panel with the @pinegrow/vite-plugin package marked Not Installed and its Setup instructions open.
VS Code vite.config.js with callouts marking the Pinegrow Vite Plugin as installed in package.json and configured in the Vite config.

liveDesigner module

liveDesigner module of the Pinegrow Vite Plugin uses Vite’s handleHotUpdate hook to feed your Vue Components opened in Vue Designer with tags enriched with unique IDs (generated within Vue Designer) to establish source-dom mapping which enables the visual editing capability.

The liveDesigner module takes the following options (all are optional). For detailed usage, refer to the @pinegrow/vite-plugin npm package (types enabled) and instructions displayed in the Config Panel.

  • repoRoot - Defaults to the project root. You set this when your project is part of a mono-repo.
  • configPath - Defaults to standard config filenames. You set this when using a custom config filename, for eg., vite-dev.config.ts.
  • devtoolsKey - A key exposed on the app’s windows object used to connect with the standalone electron devtools conditionally from the Vue menu.
  • iconPreferredCase - Defaults to unocss format (i-material-symbols-home). Icon format to be used in Vue Designer’s icon-picker (fork of the Icones app).
  • plugins - an array of Pinegrow plugins. Refer to Pinegrow Plugins guide for further details.
  • tailwindcss - used to pass cssPath and configPath for using Tailwind CSS addon in Vue Designer.

Note:

  • The integration modules for Meta-frameworks like Nuxt, Iles, etc., are simply wrappers of the Pinegrow Vite Plugin. The Config Panel will display instructions specific to the Meta-framework for configuring the liveDesigner options.
    • The liveDesigner module can also take configKeys (inspired by Nuxt module authoring, see example in nuxt tailwind module) to consume options for Pinegrow plugins. For eg, tailwindcss key is used with @pinegrow/tailwindcss-plugin.

Once setup is completed, start your dev-server, and open your startup page, as previously covered in the Config Panel guide.

If you have any issues with establishing the connection, refer to the troubleshooting guide.

Vue Designer App.vue with the Vite logo link selected in the page tree and the Properties panel showing its href.

Congratulations! You have successfully added the required integration plugins/modules to your project.

If you used one of the quick-start templates (or) sample apps from the start-screen, these integration modules are already added, so you don’t have to go through the above process and can quickly start working in Vue Designer.

How about Tailwind CSS

Yes, our configuration is not complete yet. Open the Config Panel and scroll down to follow the instructions to install and configure the Pinegrow Tailwind CSS plugin.

Take care to pass the correct configPath and cssPath options within liveDesigner > tailwindcss configuration.

Config panel for the @pinegrow/tailwindcss-plugin with the Pinegrow Tailwind Visual Editor Addon Setup steps and a vite.config code sample.

Well done! You are now hands-on with the Config Panel.

Additional Packages

The Config Panel also provides detailed instructions (in other tabs) for using other Vue Designer features, such as:

  • DX Plugins - Add various Vite plugins for auto-importing components, file-based routing and layouts.
  • Icon Picker - A fork of the Icones app. Thanks to antfu and other maintainers of this brilliant app.
  • Devtools - Use the standalone Vue-Devtools electron app and connect your app opened in Vue Designer conditionally from the Vue menu.