Introduction

Vue.js (as a framework) and Pinegrow (as a tool), both embrace classic web technologies (html, css & javascript) and builds on top of them.

Vue champions the Single-File Component (a.k.a *.vue files, abbreviated as SFC) which encapsulates template, logic and styling using the classic trio of HTML, CSS and Javascript. Learn more about the Single-File Component from the official vue docs.

<!-- Logic -->
<script setup>
  import { ref } from 'vue'
  const greeting = ref('Hello World!')
</script>

<!-- Template -->
<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<!-- Style -->
<style scoped>
  .greeting {
    color: red;
    font-weight: bold;
  }
</style>

Pinegrow loves HTML-based templating, CSS-based styling and for almost a decade, have innovated on various fronts supporting frameworks such as Bootstrap, Tailwind CSS and is a pioneer in the WordPress space!

This is an older and potentially outdated comparison of Vue with other frameworks. However, this section that discusses HTML and CSS sheds light on how Vue and Pinegrow were destined to evolve into Vue Designer.

Prerequisite

As stated in Vue.js official documentation (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.

If you are new to Vue.js world, we strongly recommend you to learn the fundamentals of building Vue apps first. That said, you can definitely use Vue Designer in your learning journey!

Thanks to Vite!

Vite, being an ESM-based development tool, has revolutionized the web space, offering a lightning-fast development server coupled with an exceptional hot module replacement (HMR) experience.

When using Vue Designer, you simply launch your Vite-powered Vue app’s development server as usual, right from your terminal. Then, open your project folder within Vue Designer, and you gain the ability to visually edit and design your components.

This incredible capability is made possible by a straightforward yet powerful development-only Pinegrow Vite plugin, @pinegrow/vite-plugin, seamlessly integrated into your Vite configuration.

Read the story of Vue Designer →

Existing Pinegrow users

Although Vue Designer is built on top of Pinegrow Web Editor, it has a different architecture, making it a separate application.

Pinegrow Web Editor handles all technologies that require compilation/transpiling (e.g., SCSS) using its built-in compilers. However, with Vue Designer, your entire Vue app is compiled and served through the Vite dev-server that you run externally from your terminal.

That being said, you will feel at home when using Vue Designer, as most visual features are similar with only minor differences.

If you are an existing Pinegrow user but new to Vue.js, just remember that the *.vue file is valid HTML format. Think of it as an HTML-based component/partial in Pinegrow PRO. This mental model will help you easily get accustomed to Vue Designer and aid you in your Vue.js learning journey.

In the future, we will further enhance and integrate the capabilities of both Pinegrow Web Editor and Vue Designer.