How to Use Vueify and Spark Together
Getting used to any new framework or development paradigm is always a challenge. Recently, we’ve been hard at work getting Spark, the SaaS framework from the creator of Laravel, integrated with our codebase. While it hasn’t been as difficult to pick up as other frameworks — a true testament to the care and skill that went into its development — it has come with its own set of nuances that have taken us some time to figure out. The biggest of our initial headaches was getting our custom Vueified Vue.js components to play nicely with Spark. We recently went over how to setup a Vue.js and Laravel project, so if you feel like we skipped over some details in this walkthrough be sure to check out that post!
Initial Setup
Before diving into getting Vueify to work with Spark, we need to do some initial setup to make sure we can use Vueify within the project. We’re going to assume that you are starting with a fresh install of Spark. To add Vueify to the your project, simply add the laravel-elixir-vueify package by running npm install laravel-elixir-vueify -save-dev in your terminal. After that head over to your gulpfile.js, found in the root of your project, and add this require(‘laravel-elixir-vueify’); right below var elixir = require(‘laravel-elixir’);. In the documentation for the laravel-elixir-vueify package there are some additional steps, but you can ignore them because Spark has already taken care of those steps for you. With the setup out of the way, let’s check out how Spark uses Vue out of the box.
Spark and Vue
Right out of the box Spark uses Vue for all of its front-end components. Feel free to explore Spark’s directory in the root of your project and take a look at the Spark source code. For your project, you shouldn’t touch the code here. Instead, Spark adds itself to more appropriate sections of the codebase that you can then edit. To find the Vue components, navigate to ./resources/assets/js/. Here you can see two directories, components and spark-components. In spark-components you can see and extend the components that are included with Spark, and in components you can create and maintain your own custom components. Spark doesn’t use Vueify, so all of its components are inline. That means you need to switch to the ‘./resources/views/vendor/spark/` directory to see its component templates. Vueify allows your templates to be stored in the same file as your JavaScript. Let’s take a look at setting your components up.
Your “Vueified” Components
As we talked about, you’ll be able to create Vueified components in the ./resources/assets/js/components/. For your custom Vue files, you’ll need to create a separate JavaScript files in order to register the component. So if I have a list.vue component I want to include, then I’ll need a list.js where I can register it. The code to register your component will look like this:
var Vue = require(‘vue’); import list from ‘./list.vue’; Vue.component(‘list’, list);This is slightly different compared to how you would normally set up a Vueify component. Normally, you would initialize a component like this:
New Vue({ el: ‘#app-id’, components: { list } });However, because Spark has already initialized its components you just need to declare the component instead of initializing a new Vue instance.
Now because Spark has taken care of this initialization, you need to load your components into Spark. To do this, make sure you are in the ./resources/assets/js/components/ directory. Here you should see a bootstrap.js file. In here you can require your component by adding require(‘./list.js’); to the bottom of the file. After doing this, you are now ready to start using your Vue components in your Blade templates!
The Wrap Up
This may have taken some time and effort to get setup, but being able to use Vueified components in Spark makes it even more awesome. Hopefully this walkthrough spares you the hours of staring at your codebase and spamming gulp -production that it took us to figure this out, and gets you using Vueify and Spark together faster.
