Awwwards
How to use Vue.js with Laravel for the First Time's Hero Image

How to use Vue.js with Laravel for the First Time

Setting up any new project is always a challenge, especially when you're trying to use that hot new language that everyone is talking about. Our hot new language is Vue.js. Recently, we started a fresh build of our application and we decided it was time to work Vue into our Laravel process. We've been using Laravel for a long time now, so we figured how hard could it be to start using Vue? We'll just hop on Laracasts, ask some questions on LaraChat, check out a few blog posts and be on our merry way. As you can imagine, it wasn't all sunshine and rainbows for us. While Laracasts was awesome - as usual - at showing us how to use Vue and the folks on LaraChat were super helpful, we couldn't find a good overview that explained how to set Vue up and use it within the Laravel framework. So, like the intrepid developers that we are, we buckled down and figured out how to make Vue work for us. The following is our initial approach for using Vue and Laravel together, and while it may not be perfect we think it's a pretty good start.

The Big Picture

Before we jumped into laying out our file structure and naming conventions, we needed to have a good look at how we wanted to use Vue and Laravel. Obviously, we could use each on their own to build out a full application, but what would be the best hybrid approach? After many cups of coffee, we decided to continue to use Laravel for the overarching structure of our application and then start using Vue to encapsulate specific pieces of functionality. So Laravel would continue to handle our routes, layouts, and views, and then we'd use Vue components within the Laravel views to build our dynamic features. To illustrate this, let's go over a quick example. Starting with a basic Laravel application, in our resources/views directory we have a welcome.blade.php view as well as a directory for layouts with main.blade.php inside it. Our welcome.blade.php view extends the layouts.main file, so it looks like this:

@extends(‘layouts.main’)

@section(‘content’)

//Some code here

@endsection

Now inside the content section, we'd add in our Vue components. So with the Vue components added the file will look like this:

@extends(‘layouts.main’)

@section(‘content’)

//Vue components
<module-one></module-one>
<module-two></module-two>

@endsection

Pretty straight-forward, right? We're using Laravel just like we normally would, but instead of creating our views with Blade we're using Vue components. Additionally, we're not limiting ourselves to only using Vue for our views, so we can still use Blade when we need it. But for dynamic features we're going to stick with Vue as much as possible.

Setting Up Your File Structure

With our conceptual framework laid out, we we're able to jump into the nitty-gritty of setting up our project. On the Laravel side, we kept things pretty much the same. For our application in particular, we've organized our Blade templates to correspond with specific modules but otherwise it's a standard Laravel project.

As far as our naming convention goes, we try to have the name describe what the view contains as much as possible.

On the Vue side of things, we've structured our files as follows:

Within our usual resources/assets/js directory, we added a directory for components. In here, we decided to group our Vue files according to the functionality that they are creating. This lets us be very atomic and modular with our Vue components while helping us stay organized as we expand each piece of functionality. With our naming convention, we tried to describe what the component accomplishes. This helps us understand the relationships between components as we nest them inside each other.

Adding in Vue.js Testing

Now that we have Vue and Laravel ready to go, we still have one last hurdle to overcome: our testing setup. We're newcomers to the TDD game, but we can't imagine how we used to develop without it. So we really wanted to make sure that we could test our Vue components to make sure they were operating like we expect them to. Once again we turned to the all-mighty Google for answers, but we couldn't find a satisfactory walk-through for setting up Vue testing in a Laravel project. We ended up hacking together a solution using a variety of Node.js tutorials and some good old-fashioned thinking. Using NPM, we added Karma to our application and configured it to use Jasmine. Then in our tests directory, we added a directory called js and in there we added a directory for the components. So our file structure looks like this:

As you can see, we have our test files and directories mimic the layout of our Vue files and directories so it is easier for us to maintain and understand. Now we just need to write out tests and run karma from the command line and our tests will run - and hopefully pass!

The Finish Line

After all of that work, we finally have Vue and Laravel playing together nicely. As we continue to use Vue and Laravel together, we're sure that we'll end up tweaking our project structure to make them work together better. And we'll be sure to keep you updated with our latest findings so your applications can keep getting better too.


Nick Basile's Profile Picture

Nick Basile


Lead UI/UX Engineer

Nick is the Lead UI/UX Engineer at Metric Loop. He lives in Austin, TX and spends his free time taking long strolls on South Lamar. If you see him, be sure to honk.