VueJS support for pinegrow

I’m trying to picture what support for Vue.js would look like. Just design and styling of components? I haven’t done a lot with Vue, but I don’t think a lot of the logic and the routing is very ‘drag-and-drop’. I guess I could see actions to add loops and logic to HTML elements, but it still seems like the heavy lift will be in VSCode or Atom.
Maybe somebody can explain their vision for how PG could help.

You can always use it as a piece of your workflow, given its not all incompassing for your needs.

But given that the Angular implementation was not kept up to date, I’m not sure if these types of frameworks have an immediate future in Pinegrow as an integrated workflow, but it sure would be nice. Of course React and Vue are now considered much more popular than Angular.

I thought there was a post somewhere where I saw mention of Angular and a few frameworks eventually being dropped from within Pinegrow but I can’t seem to find it (so maybe I am mistaken).

1 Like

Thanks mate, good point, time to innovate on my workflow with my tool suite.

I was more eagar to hear from the PG team if they have thought on these lines (and possibly working on an enhancement) of supporting javascript frameworks to increase our productivity even in a minimal way esp from a design perspective, or if they are sticking to their base philosophy on keeping their base tool agnostic of frameworks.

Clarity from the PG team on this will help users like me to understand & accept that this is not in their backlog and at least I can move on by tweaking my workflow (w.r.t tools). In fact, just tagging all feature requests with a status will help, for eg, like “brainstorming”, “in progress”, “rejected”, “implemented”, “partially implemented” etc…

#sanity - Waiting for features in apps can be a long deserted road. Its best to just keep coding and moving forward, also never stop looking for new tools and processes, don’t let apps hold you back. ;—)

Time will tell what the developers eventually say/do regarding Pinegrow. Be advised responses can be slow around here concerning direct feedback. You’ve made some good points though.

1 Like

I failed to see your post @RobM, maybe have a look at Vuegg for some ideas.

@TechAkayy, RobM is a recent addition to the Pinegrow team.

1 Like

I have got the green light to “hint” :wink:

We are working on Vue.js integration with Pinegrow… think “live-designing” your .vue components (served by your Vite dev-server) in Pinegrow!

#clean-code

No ETA yet, but getting closer, stay tuned! It will be a core add-on!

4 Likes

we will be able to just design components or we will be able to use Axios to populate them?

A wizard to generate <script> part of the component would be amazing

Thanks for your interest @MooCloud

Our aim at the moment is to design the workflow to smartly integrate with the current developer experience (DX) of the Vue.js community, and enhance it with Pinegrow’s current DX (visual designing).

Once ready, we will actively engage the community and the add-on will evolve with you. With regards to your question - users will be able to design their components with live API data.

Ideally, we would have preferred “surprising” the community with this add-on when it’s ready. But, support for JS frameworks like Vue.js has been a frequent question here on this forum. So, the objective of my above post is to give a soft heads-up :wink:

Our focus at the moment is to work towards our first milestone.

4 Likes

Thanks @TechAkayy for linking this.

I really need to chew on the desire to have React/Vue etc etc inside of Pinegrow. A few thoughts,

  • Is this a “want” from the community without fully understanding what these reactive libraries were created for - Reactive libraries are really not suitable for any website that requires SEO. Basically anything that’s not behind a log-in is useless. Are people requesting this just so they can jump on the band-waggon of Vue websites??
  • The power of reactive libraries is in the code/state to me this feels like a complete UI overhaul to support building components and linking/managing state across the site. A simple plugin to adjust Pinegrow is not enough to support it to the extent that justifies a Vue app. If you’re not using state, you don’t need a Vue app

Once again, this are my brainless, mind-dump of thoughts. I welcome debate to help me formalise and look forward to your solution Akayy but I am apprehensive about the who the intended market is.

EDIT: A solution I proposed in Webflow was to build a component library and simply use the classes inside of your code (in a custom code widget) but ultimately I do not recommend this solution because of the SEO impact of loading HTML after the page has loaded.

Good questions @fakesamgregory :slight_smile:

Vue is a progressive framework with declarative rendering, reactivity & component based authoring at its core and things like routing, state management are all designed to be opt-in based on user’s needs.

Vue took a lot of inspiration from React, but unlike React’s everything-in-javascript philosophy, in Vue (svelte too), component authoring is done in a valid html-based format called Single-File-Component which is a smart encapsulation of a component’s template, styling & it’s dynamic part (script). This naturally integrates nicely with Pinegrow through some smarts which is what we are working on. Templates vs JSX is something that pops up on twitter all the time, but Vue actually supports both.

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. We can choose to build a completely static site (pre-rendered during build-time) or a server-side-rendered (ssr) web app and both of these don’t have SEO concerns. Let’s not forget hybrid apps where certain pages can be statically generated (landing pages) & those behind the log-in page can just be a single-page-app.

Check meta-frameworks like Astro & Iles, where you can author various parts of your site using Vue components and ship a classic MPA with 0kb javascript by default, and partially opt-in for interactivity. Of course, the creators of these js frameworks should take the blame for over-marketing them as SPA frameworks, which was a trend few years ago!

All said, we will share more details via docs & video guides, and let’s not forget, the current offerings will have all the love as always & more :wink:

3 Likes

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.