I published example of Vue.js in Mezzio application at https://github.com/samsonasik/mezzio-vue , enjoy 
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
Acceptinstead of the non-standard fieldX-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. 
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
One point updated for use Accept: application/json in search portfolio that retrieve json data
thank you Frosch
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.
I would like to follow the SPA architecture using VueJS and Mezzio. Can you please give me an example on how to start with that? Sorry to ask, but I’m lost with this.
@froschdesign Please ignore my last question regarding how to build an SPA backed by mezzio. I’ve manage to do so by following the design principles you’ve listed:
- mezzio delivers data in json format
- vue (in my case) do the presentation
With this way you decouple the systems and the testing of the endpoints of the Mezzio application can be simplified.
And if another frontend framework is hyped tomorrow, then you can switch quickly.
Hello,
i just test your skeleton today, and it was very interesting. I also use Mezzio with Vue components, but there are smaller, so they make only parts of the site dynamic. I use it with webpack encore from symfony, it work really smooth.
thanks for your work,
thomas