VueJS support for pinegrow

Cheers for sharing, though they aren’t questions! They are thoughts.

I just don’t know why one would want to design Vue components in Pinegrow. The point of these libraries is state and reactive nature that’s also rendered on demand (unless pre-built or SSR) so unless there’s an interface to handle all this, to me, it’s pointless. I’d just create my components in a style guide and use those same classes in my Vue code.

Again, I’d question why users want to create Vue components in Pinegrow. What projects they feel the need to use Vue on and why they came to that conclusion.

Frameworks like React & Vue are not the root-cause of SEO concerns, rather it’s an outcome of the rendering & caching strategies the user chooses.

Are React and Vue allowing this nowadays? I can’t see anything in their documentation. Because I’ve always gone to Nuxt and Next for my pre-rendering needs because React and Vue are the root cause in the way they are designed to work (which is why Next/Nuxt/Gatsby/Preact where all created).

I’m aware I might be missing something here. I’m trying to keep and open mind but struggling. I guess I’ll wait until the first Beta to see what you come up with. Would love to know @matjaz’s thoughts on why they dropped Angularjs and supporting these frameworks (sorry i keep dragging you into conversations).

Some guesses from my end:

  • Angularjs was javascipt based and development stopped back in 2018 & now its officially not supported anymore
  • Angular (2+) was a angularjs spin-off but is typescript based and it’s fair to see it as a separate framework all together. Typescript means need for transpilation and wouldn’t play nicely & natively with our internal browser. Devs simply can’t angular without learning typescript
  • All javascript is valid typescript but the whole ecosystem, cli, tooling everything is typescript based and there is no way out

But, above all, I think the primary reason is angularjs → angular (2+) dropped the cdn usage.

To add to @TechAkayy’s comment:

Anglar 1 was really nice to implement in pure HTML. But then its major versions just kept coming out every couple of months or so, every new one changing how things were done, and more and more relied on the complex tooling. There was no way for us to keep up with that.

1 Like

Vue 3 is very stable and is similar enough to HTML for Pinogrow to support it, same for svelte.
With the composition API, many new features can be supported by Pinegrow easily.

We use frameworks like Vue or React because you can’t have a multi-lingual, multi-country website, that is easy to maintain and manage without it, with their Full Stack framework Vue, Svelte, and React allow us to build what we want, to distribute it on a CDN and with SSR, SSR-Hybrid, Client Side Hydratation solution or ZeroJS like Astro we can have even SPA or MPA that scale with our project.

Supporting a Front end JS framework is needed, Svelte or Vue are required.

1 Like

AngularJS and Angular 2 have just the name in comune, no way Pinegrow could support angular 2 with out rewriting everything and angular 2 is very opinionated.

Vue and Nuxt or Svelte and SvelteKit are different software, you should not expect from Vue an SSR solution because that is more a Full Stack framework task; Vue gives you the freedom to code and uses his code stand-alone or with other software, that’s a feature, not a missing opportunity.
You can use Vue with many FullStack frameworks like Nuxt or SSG like Astro.

Another example is when you have a product catalog, I don’t want to code manually over 5000+ product pages, like some of our customers have.
I just use Vue and Vue Router to use the path to hydrate my single-page template with the product information and if you don’t want to use Nuxt, just do it manually using vue/server-renderer and you will have SSR to work as a static website with perfect SEO.

2 Likes

We are working on this. I’ll let @TechAkayy add more about this.

4 Likes

You are absolutely right here @fakesamgregory, the default Vue app is a pure SPA.

  • Frameworks has to be seen as an ecosystem, where the user can pick and choose solutions depending on their use case. For SEO, all the major frameworks have good solutions. I could have reworded the second half of my previous reply, where, by Vue, I was referring to it as an ecosystem.

  • Early this year, the Vue team in their complete rewrite of their docs for Vue 3, added this page - “Ways of Using Vue” summarising the various types of apps that can be built along with solution recommendations.

  • So, for jamstack or fullstack (where SEO is taken care of), Vue does recommend meta-frameworks like Nuxt…

This is pretty good feedback, and we will surely cover the “why design vue components in pinegrow” when it’s time.

Vue does have a huge coverage, and this is purely user’s decision.

Like with css frameworks like bootstrap & tailwind, it’s a prerequisite for the user to know Vue (building components with SFCs) to use our offering, but we do hope our offering helps users in their learning as well.

@MooCloud, we are focussing on Vue for now, as SFC & it’s attribute binding (always within quotes) works nicely with Pinegrow. Svelte has a little more magic with attribute binding {} and jsx-like if else.

We are targeting live-designing (by designing think - template & style sections in our tree & styles panel) of SFC in Pinegrow in the context of a live Vite-powered app. We would like to progressively increase our support for various meta-frameworks & UI libraries, but simple apps first. We are naturally aligning with the ecosystem catching up with Vue 3.

Some of the stuffs in Nuxt3 roadmap are amazing, especially ISG (SWR), islands architecture, design tokens based theming, themes like docus (for docs), alpine (for blogs)… though I wish they achieve full-static like in Nuxt2 as a priority to be truly jamstack (on their ssg front). Now, back to work :wink:

1 Like

Look forward to seeing the result!! Good luck with it all

Ok cool. So it wasn’t because the tooling required to create a Angular 2 website? I think I only ever worked on 1 AngularJS site before Angular 2 took over. I think it needed to be compiled just like Angular 2 so Webpack/pre-compiler was running or something in Pinegrow?

Vite/JS Modules has made pre-compilers almost unnecessary now so could be a huge leap forward for those looking to add a SPA Framework plugin.

There is, is just a bit hidden under nuxi.
Using the “generate” command u can generate static and dynamic pages, with also composition api compatibility.

1 Like

Maybe tomorrow is the devoted day which integrated Vue support arrives in Pinegrow. :thinking:

https://pinegrow.com/release_notes/vue-designer-1-0-june-28-2023/

Vue-Designer-v1.

1 Like

Thxs @Pinegrow_User. We are doing some final touches, so will be slipping by a week, but next week for sure :smiley:

4 Likes

Correction: Vue Designer 1.0 is almost ready for launch. :rocket:

2 Likes

@Emmanuel Would it be possible to develop frontends with Laravel Blade components and VueJS together in one project once this launches? I would love a frontend visual designer to work with Laravel/Vue.

I’d love the best way to integrate Pinegrow with a Laravel project that uses VueJS and TailwindCSS on the frontend.

:grin: Semantics, given its ‘within’ the Pinegrow product umbrella and will no doubt work seamlessly as an ‘integrated’ part alongside the core Pinegrow product family. Though I don’t mind being corrected if that will not the case. I doubt Pinegrow chose to orphan its own core products as part of the Vue Designer mantra “alongside your favorite development tools” and Pinegrow’s desire to remain agnostic in its approach.

However I’m less inclined to be concerned with those semantics and more interested to see the overall Vue Designer feature scope along with if it will be properly maintained and updated past the initial launch and fanfare. Hopefully it will be and remain on a better lifecycle of updates compared to other Pinegrow products such as Pinegrow Theme Converter, PGIA / Pinegrow Interactions, etc. It’s good to see those are now being “corrected” after faltering for such a lengthy time period.

Thankfully @TechAkayy is on the job with Vue Designer.

Interesting stack @CleanCoderFX. Do you by any chance have a simple project as a github repo of this combo, so I could test it out at my end. Thanks!

Hi TechAkayy. I’m new to laravel, learning everything for Laracasts.com. It’s a popular stack combination because it’s taught together and there are Laravel starter kits that tie everything together with this exact stack.

Hi @CleanCoderFX,

Please check this one related to laravel+vue - Laravel Inertiajs with Vue Designer (Vite-powered)

Out of Curiosity why a separate designer for VueJS and not a plugin?