7

I'm going to launch a new project with this two frameworks (I like):

  • Laravel 5
  • Vue.js

The Frontend developer prepares the HTML's in atomic design, generated with patternlab.io.

Now I'm looking how I can integrate the patternlab.io project that I don't have to rewrite all the elements in a blade template.

I found some implementations combining Patternlab & Laravel using TwigBridge, Laratash Laravel extensions.

But I've some thoughts:

  • In the blade templates there is: logic, conditions, loops,.... If I combine patternlab and laravel then I need to put all this in the patternlab project.
  • Because of using vue.js I need to add also these tags to the patternlab templates

So I think it's not the best choice to integrate the patternlab.io templates in the laravel project.

My idea was:

  • Frontend DEV uses patternlab to create the templates
  • Laravel automatically generates & imports the CSS Stylesheet generated in patternlab
  • The Backend Developers copy the patternlab - molecules manually in the blade templates and add their own logic
  • If the Frontend DEV make changes on CSS, it's fine - we'll run in no issues; after rerunning the laravel gulp process to update the css files we have the new updates.
  • If the Frontend DEV makes some changes on a html structure we need to manually adjust them.

Is there a better solution combining Atomic Design, Vuejs and Laravel? How do you deploy atomic design in your CMS?

brokedid
  • 879
  • 2
  • 10
  • 35

1 Answers1

0

In the last three Vue/Laravel projects we've created we'v stopped using PHP as a rendering engine all together and used Vue exclusively. Laravel is still a really great framework for writing business logic and apis in a clean testable way – but we've decided to never use blade again.

Typically the issue you run into when trying to create a JS rendered application with a PHP backend is the lack of server side rendering. To solve this problem I've turned to a new project out of the Vue community, Nuxt.js (I have no affiliation with them, just a happy developer). Nuxt lets you write vue components and have them be both server side rendered, and rendered in the browser after the initial page load.

This allows us to completely decouple all of the rendering responsibilities away from Laravel and keep it in a single location, so no need to do blade and Vue – it's all Vue.

The only downside is that you'll need 2 servers Node.js and PHP.

jpschroeder
  • 6,636
  • 2
  • 34
  • 34
  • Thanks for the info - so you still use laravel for the api endpoints? – brokedid Aug 16 '17 at 08:22
  • Yep, in several cases we are doing just that. You could certainly use something else for the API too, but there is something pretty nice about having such distinct concerns. – jpschroeder Aug 16 '17 at 12:23