Laravel Spark - Vue components
Laravel and Vue
Components are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code.(Vuejs.org)
Taylor Otwell, the creator of Laravel, is a big Vue fan and this is why you will find it in a lot of Laravel products. Spark is using Vue too. A lot of the given features like the authentication, the admin panel or the menu is build with Vue. But it is not a requirement. Of course you can use the front-end framework of your choice, but I can totally recommend it.
Spark and Vue components
This is how a Vue component is created.
This is the JS part. Additionally you will need some markup for your component which you can add through the template property.
One way to define your markup is to add it inside your component. To use this component you would just use custom tags like:
I do not like this approach, because a string is not the best way to store HTML markup. Therefor I prefer the inline template feature of Vue. Here we have a custom tag for my component with an HTML attribute of
inline-template. This tells Vue to use the markup inside of these tags. This is much cleaner and your IDE will recognise it.
In both cases you will need to write you component styles in your CSS files like always. This is a little disadvantage because your component has parts in multiple locations. It would be much better if all the parts where just in one file.
Vueify to rescue
Vueify lets you write all your component stuff in one file like this:
Isn’t that great? Every time you want to change something in your component there is only one place you need to look.
Back to Spark
When I started to use Spark I wanted to use some of my already given .vue components too, but since Spark is a little bit different from standard Laravel projects I didn’t managed to use them. After some weeks of reaching out for help, I finally got the solution. (Big thx to @jstoone)
Here is an example of a .vue component. It just outputs a headline with a certain message. This will be our example .vue file.
1. Adding a global .vue component
First we want to register this component as a global one. Therefore you need to modify your Spark’s app.js:
Just the two lines marked with “new” are, well guess, new.
Let’s test it by placing the component inside the home.blade.php view.
Let’s check if everything is working. Wuhu!
2. Adding a child component
If you want to use a component inside of another component like the Spark home component, you can do that as well.
We are importing the .vue component again, but then we add it to a already existing component. Now we can use Hello inside of the home component:
Last time I showed how to start adding a little nav in Laravel Spark. Today it was all about Vue components. Not everybody is a fan of the one file .vue components, but if you are you now know how to use them in your Laravel Spark application. Thx to @jstoone again for providing the solutions!