Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
One of my latest private projects was Frontend built fully with Vue.js. I wanted to support a group of users and roles, where certain account types would be restricted from entering given pages or seeing some of the components.
While Symfony restrictions are provided out-of-box, Vue.js doesn't have such a built-in mechanism, so I decided to combine a bit of knowledge from Vue.js tutorials and Symfony mechanism.
Vue.js allows users to emit an event from a child component and react to it in parent component via this.$emit('event-name') . While this works like a charm when being used directly in components, it does create an issue when working with TypeScript.
Let’s assume (based on my private code) that:
Why using jQuery? Why bothering? Isn’t it dead? Isn’t it way too messy? Is it still being used in nowadays projects? Is it still…
and so on and on…
Symfony provides us the symfony/form package which makes the handling of rendering and submitting forms easier than ever. Soon this will become even easier with the new “Form handler helper”, but that’s not the point here.
What annoyed me when I first started working with Vue.js was the fact that I pretty much like the need to say “goodbye” to the forms rendering directly in the Twig (which is very handy).
In this article I will skip the Symfony authentication process as this can be found in the official documentation (it’s more about presenting the solutions in case of using Vue.js):
Vue.js allows us to either create a SPA (Single-Page Application) or to be used in the form of hybrid where we can inject the components into already existing code or use Vue.js as an extension of current frontend code (In which case I learned the hard way that it can become very messy — You can find more here) — as for both cases the authentication can be implemented/solved in different ways.
