A desktop visual editor for Mac, Windows and Linux that lets you visually design your Vue applications.
Vue Designer integrates into your current workflow, no lock-in
Free trial is included. All features are fully functional in the free trial.
Watch a short narrated video to learn about how Vue Designer works and what it can do for you. Or, scroll down to learn more about each feature.
To begin with Vue Designer, open your Vue project and follow
Config Panel instructions to add @pinegrow/vite-plugin to your Vite config. Start
dev-server and enjoy drag-and-drop and visual editing for Vue
components in Vue Designer.
Supported Integrations -
Vue Designer supports various Vue meta-frameworks like Nuxt,
Iles, and more in a single app. Easily add integration modules
(e.g., @pinegrow/nuxt-module) by following the
Config Panel instructions.
Access dynamic data from various sources, including headless
CMS. Use Vue Designer's advanced visual tools to quickly
build responsive components with live data through multi-view
editing and live-preview features.
Effortlessly navigate and manage components with the powerful Component App Tree, like building your app with Legos.
Utilize Vuetify , Nuxt UI , and Naive-UI for efficient Vue development. Experiment with Props panel and Vite-powered live previews. Bind props to state variables for rapid iteration.
Integrate your custom component library with Vue Designer using JSON-based web-types. Drag-and-drop components, set props visually, and streamline app development.
Use the built-in Icon Picker tool to choose from a vast collection of icon-sets and include only the used icons in your final bundle. Powered by the incredible Icones app.
Meet your new web development assistant. It knows how to
create and transform HTML code, how to manipulate content,
come up with CSS styling, add dynamic properties to components
and much more. Learn more.
Design beautiful stunning components using Tailwind CSS add-on, that comes with customized visual controls, Class Tree Inspector, a powerful Design panel for theme customization and more. Learn more.
Special Launch Promo
For a limited time, you can get the Tailwind CSS Add-on for free, included with your Vue Designer subscription.
Vue Designer opens and saves standard .vue files (single-file components). It simply
integrates into your existing Vite based build process.
Vue Designer also works nicely with an external editor such as Visual Studio Code. We strongly recommend maintaining your projects with git-based version control.
That means that you get to use all the powerful HTML & CSS editing features of Pinegrow in your Vue projects as well.
with 30 days money-back guarantee
Vue designer is available with an affordable subscription plan. You can cancel at any time. If you cancel the subscription you will not be able to use Vue Designer any more, but all your code and projects will continue to work.
You'll be charged every year. Cancel at any time.
Our order process is conducted by our online reseller Paddle.com. Paddle.com is the Merchant of Record for all our orders. Paddle provides all customer service inquiries and handles returns.
Not 100% sure if Vue Designer is right for you? No worries. Try it without risk.
Get support when you need it and join our friendly community on Discord.
We work on Vue Designer full-time and publish frequent new releases.
Absolutely! Pinegrow's Vite plugin or the meta-framework specific integrations are development-only and activate within your dev-server's plugin chain only if the project is currently opened in Vue Designer. So, if your team is not using Vue Designer, it won't have any effect on their workflow.
Alternatively, you can add the Vite plugin/integrations just on your local branch.
Even though Vue Designer is built on top of Pinegrow Web Editor, it is architecturally different. Bundler based tooling has come a long way in the past decade, and we integrate with and leverage the power of Vite for on-demand compilation, and an amazing HMR experience.
In Vue Designer, your Vue components & your app in a whole are served via an external Vite dev-server, while in Pinegrow Web Editor, technologies that require compilation/transpiling (e.g., scss) are handled with in-built support.
As stated in Vue.js official docs (prerequisites), a Vue developer is assumed to be already familiar with HTML, CSS and Javascript.
On a similar note, you are expected to be familiar with Vue when working on your Vue apps in Vue Designer, but you can definitely use Vue Designer in your learning journey. What better way to build your visual medium (your apps) than to built it visually, like how your users will experience it?
A separate license is needed for each individual user who is using the app. Exceptions are made for family members - it makes no sense requiring your kids to buy a separate license if they want to learn with Vue Designer on your computer.
You can install your copy of Vue Designer on up to 3 of your computers (at home and at work, Windows, Mac or Linux) as long as you are the one using the app.
All our web development applications work with your local projects and work well together with your other tools.
General purpose HTML & CSS editor that lets you build responsive websites faster with live multi-page editing, CSS & SASS styling, CSS Grid editor and smart components for Bootstrap, Foundation and the possibility to add custom frameworks.
Vue Designer is a visual IDE for Vue applications. It works with every Vite project and frameworks such as Nuxt and Iles.
Pinegrow Interactions is a powerful visual editor for designing web interactions and animations. Pinegrow Interactions extends Pinegrow Web Editor with interaction composer and fully-featured animation timeline editor based on GSAP.
Pinegrow Web Editor with integrated WordPress theme creator. Add WordPress smart actions to page elements to impart dynamic CMS functionality to the theme.
Export fully-featured, proper WordPress themes with content custom-tailored to each project.
Install Pinegrow on your WordPress site and turn it into a visual development environment for building custom blocks, whole themes and static HTML projects.
Use same features as WordPress Builder in Pinegrow Web Editor.
Standalone WordPress theme builder that lets you use any website builder to create custom WordPress themes.
After the conversion is set up, you keep using the original website editor to make changes to the theme.
An add-on for Pinegrow Web Editor that lets you visually edit TailwindCSS projects. It comes with the full range of visual controls and supports working with custom TailwindCSS themes.
Take static HTML snapshots of dynamic web applications and use them for collaboration, styling and prototyping.
Open your app in Pinegrow Snapshots, navigate to any screen or state and save it as a static HTML snapshot.
Great in combination with Pinegrow Web Editor.
An online space where children learn HTML & CSS and practice their skills on fun creative web projects.