The problem 🤔

Sometimes, you need VueJS in your Laravel Mix workflow, without having to use any additional packages like Laravel Jetstream. All you need is to create a simple Vue component somewhere in your project.

The expectations 📋

I will assume you already have a project created with all Laravel Mix dependencies installed and compiled with npm install && npm run dev

The solution 🤓

Let's imagine you want to create a simple Vue component called Welcome.vue and put it somewhere in a blade template.

Let's create a file inside resources/js/components called Welcome.vue

<template>
    <div>
        <h1>Hello There!</h1>
    </div>    
</template>

<script>
</script>

Now, let's create a file in resources/js called index.js. This file will be responsible of importing your components and mounting the Vue application

import { createApp } from "vue";
import Welcome from './components/Welcome';

createApp({
    components: {
        Welcome
    }
}).mount('#app');

Now, open webpack.mix.js located in the root of your project. Add a line to compile your index.js file and place it in your public folder. Notice the call to .vue().

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/index.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Before we recompile our assets with npm run dev, let's first install Vue using npm

npm install -D vue

Now, run npm run dev to compile your assets. Because we have a call to .vue() in our webpack.mix.js file, Laravel will install the required dependencies to properly compile Vue files, and will prompt you to run npm run dev again to complete the process.

Once this is done, you can add these lines in any blade template and start using your component

<script src=“{{ asset(‘js/index.js’) }}” defer ></script>
<div id="app">
    <welcome />
</div>

Testing with Jest ✅

Because testing is very important, let's also install Jest. This will allow us to test our new Vue component.

The easiest way to do this is by using vue/cli. So let's install this globally with npm

sail npm install -g @vue/cli

Now, use the vue command to install jest and all it's dependencies

vue add unit-jest

We are almost done 😮‍💨 just a couple of final touches.

By default, Vue expects our Javascript code to be placed in a folder called src/, and all the test files to be placed either in tests/unit (notice the lowercase 'u') or a folder called __tests__ anywhere in the project. I find it more convenient to place my tests in the -already included- tests/Unit folder (uppercase 'U').

Also, I want to change the Javascript root folder to be resources/js. This way, I can import components in my test files using @/ and that will point to resources/js.

To achieve this, open the newly created jest.config.js and add the following to entries

module.exports = {
 // ...
  testMatch: [
    '**/tests/Unit/**/*.spec.[jt]s?(x)',
    '**/__tests__/*.[jt]s?(x)'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/resources/js/$1'
  }
}

Running Vue Tests

When we installed Jest, Vue created an example test file inside tests/Unit called example.spec.js. Let's rename this file to Welcome.spec.js and modify its contents to look like this

import { shallowMount } from '@vue/test-utils'
import Welcome from '@/components/Welcome'

describe('Welcome.vue', () => {
  it('renders the component', () => {
    const msg = 'Hello There!';
    const wrapper = shallowMount(HelloWorld);
    expect(wrapper.text()).toBe(msg);
  })
})

Now, to run your tests, use the npm script that was also added by Vue

npm run test:unit

You should see all your tests passing

✅ ✅ ✅

---

If this was helpful in any way, don't forget to like and share it ❤️👍🏻

Thank you for reading!

Bye 👋🏻