Example of Vue.js in Mezzio Application

I published example of Vue.js in Mezzio application at https://github.com/samsonasik/mezzio-vue , enjoy :wink:

The process is in the following blog posts:

1 Like

I’ve added webpack support into it

it now has 100% unit test coverage.

Thanks for sharing!

Is there any particular reason why the entire JS code is uncompiled under public access?

that are for development environment, easier with uncompiled code. For bundled minified version for production purpose, we can use webpack, documented in readme for how to use it.

1 Like

I checked the code some more and I would suggest to eliminate the render layer via laminas-view. Which means:

  • deliver only data via JSON from the Mezzio application
  • use the standard request field Accept instead of the non-standard field X-Requested-With
  • move the HTML to the Vue components

This would result in a better separation of the different layers in your application.

What do you think?

Json is used for portfolio page example.

As it is a php application, I prefer to use normal php template for rendering the HTML. I also didn’t get a proper way to import template eg “.vue” in php when I only want to load page when it clicked.

As far as I know, X-Requested-With header with XmlHttpRequest value is the way we know the request is ajax.

You mixed backend and frontend here. Your application does the rendering two times: one on the server side in PHP via laminas-view and the HTML templates and one rendering on client via Vue.
For example your portfolio which needs two requests: one for the data and one for HTML. After that, everything still has to be assembled in JS.
Then you could put everything together on the server directly. :wink:

If the client send in the request header that he accepts only JSON then the application must return JSON – if the application understands and can handle it. No need for non-standard request field here.

One benefit of only sending data via JSON: a pure data API is easy to test. There are many libraries that make the work with it comfortable.

Thank you frosch for the suggestion. I still prefer the current implementation because in view, I even still can do php stuff. The twice render only on hard refresh, once it is loaded, they are cached. I think it is mostly about preference :wink:

One point updated for use Accept: application/json in search portfolio that retrieve json data

thank you Frosch :wink:

This has nothing to do with preferences. The topic is: SPA (single page application) architecture.

As far as I know, load another page view (view content only) via ajax is fine eg on trigger button click.

I know about load all the template once (saved to components means it already loaded), and switch over during navigation click, but I don’t want it for this example.

You’re right, there’s nothing wrong with it!

But your application also loads raw templates for Vue which are not pages or content. Besides the architectural issue, this results in the problem that you can never use the benefits of pre-compiled templates.

By the way, the same topic for a tutorial is also on the list of planned tasks for the documentation. But first I have to write some more tutorials about application integration for the different components.