VueJS support for pinegrow

Any chance of having Vue integration in the future? That would be awesome!
I’m coming from Boostrap Studio. It was quite restrictive. Pinegrow rocks! :slight_smile:

8 Likes

This would be nice to have.

Yes please. 1+ for this

VueJs… Yes Please… +1 :slight_smile:

Adding in another +1 for support of VueJS in Pinegrow.

VueJS is becoming my go to platform (when I can’t use Wordpress) for a project, and I need better “out of the box” functionally than I get with bootstrap (which I’m moving away from because I don’t want to use jQuery any more!)

VueJS in Pinegrow + VSCode would be awesome IMHO.

Likewise. 1+ for this

Yes please!! +1 for this

Likewise. 1+ for this

Adding in another +1 for support of VueJS in Pinegrow.
Any news about this Feature Request?

1 Like

As I have been delving into javascript frameworks, I have realised “component” based applications are the key, and pinegrow doesn’t really support this, and slowly I’m realising that I can’t use pinegrow anymore in this journey…

Vuejs javascript components includes html-based templates and scoped styles… and as it’s within a javascript file, the rendering in pinegrow is dynamic… and we can’t use pinegrow’s powerful features for designing… Or, is there a way to still use pinegrow in this scenario?

I understand pinegrow has it’s own component feature (which I believe is in vanila js under the hood), but would be great if this is extended to js framework components too… may be I will build a plugin for this :thinking:

Would be great if the pinegrow core team @Emmanuel can provide some updates if they are building anything to support js framework components or not…

Disclaimer: I’m a complete novice to tech, have been lately upskilling myself on web technologies (pinegrow made it easy), so if I understood anything incorrectly above (reg js frameworks), please feel free to correct me, cheers!

1 Like

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