Category: Vue Answers

Sometimes, we want to fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project.

In this article, we’ll look at how to fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project.

How to fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project?

To fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project, change our Webpack config.

We change the Webpack config file in our project to include

{
  //...
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.vue'],
    alias: {
      'vue': '@vue/runtime-dom'
    }
  },
  //...
}

so the the vue module references '@vue/runtime-dom'.

Conclusion

To fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project, change our Webpack config.

Sometimes, we want to mock methods on a Vue.js instance in tests.

In this article, we’ll look at how to mock methods on a Vue.js instance in tests.

How to mock methods on a Vue.js instance in tests?

To mock methods on a Vue.js instance in tests, we can use jest.spyOn.

For instance, we write

import MyComponent from "@/components/MyComponent.vue";

describe("MyComponent", () => {
  it("click does something", async () => {
    const mockMethod = jest.spyOn(MyComponent.methods, "doSomething");
    await shallowMount(MyComponent).find("button").trigger("click");
    expect(mockMethod).toHaveBeenCalled();
  });
});

to add a test that spies on the MyComponent‘s doSomething method with

jest.spyOn(MyComponent.methods, "doSomething")

Then we click the button that triggers doSomething to run with

await shallowMount(MyComponent).find("button").trigger("click");

And then we check that doSomething is called after button click with

expect(mockMethod).toHaveBeenCalled();

Conclusion

To mock methods on a Vue.js instance in tests, we can use jest.spyOn.

Sometimes, we want to access a Vue.js component instance or data inside filter method.

In this article, we’ll look at how to access a Vue.js component instance or data inside filter method.

How to access a Vue.js component instance or data inside filter method?

To access a Vue.js component instance or data inside filter method, we can pass the component data into the filter as arguments.

For instance, we write

<template>
  <div id="app">
    {{ amount | currency(exchangeRate) }}
  </div>
</template>

<script>
//...
export default {
  //...
  filters: {
    currency(amount, exchange) {
      return amount * exchange;
    },
  },
  //...
};
</script>

to set amount as the value of the amount parameter of the currency filter and exchangeRate as the value of the exchange parameter with

{{ amount | currency(exchangeRate) }}

Then we return the 2 values multiplied together and return it so the product will be rendered in the template.

Conclusion

To access a Vue.js component instance or data inside filter method, we can pass the component data into the filter as arguments.

Sometimes, we want to stop Vue.js from converting input[type=number] input value to a string value.

In this article, we’ll look at how to stop Vue.js from converting input[type=number] input value to a string value.

How to stop Vue.js from converting input[type=number] input value to a string value?

To stop Vue.js from converting input[type=number] input value to a string value, we can add the number modifier to v-model.

For instance, we write

<template>
  <form>
    <input v-model.number="quantity" type="number" />
  </form>
</template>

to add the number modifier after v-model.

As a result, quantity would be a number instead of a string.

Conclusion

To stop Vue.js from converting input[type=number] input value to a string value, we can add the number modifier to v-model.

Sometimes, we want to pass Laravel CSRF token value to Vue.js.

In this article, we’ll look at how to pass Laravel CSRF token value to Vue.js.

How to pass Laravel CSRF token value to Vue.js?

To pass Laravel CSRF token value to Vue.js, we can create a slot in our Vue component to accept the CSRF token.

For instance, we write

@extends('layouts.app')

@section('content')
<my-vue-component>
  {{ csrf_field() }}
</my-vue-component>
@endsection

to wrap my-vue-component with the csrf_field() helper.

Then in MyVueComponent.vue, we write

<template>
  <form>
    <slot> </slot>
  </form>
</template>

to add a slot into our component.

And the CSRF token will be interpolated there since we have {{ csrf_field() }} inside the my-vue-component tags.

Conclusion

To pass Laravel CSRF token value to Vue.js, we can create a slot in our Vue component to accept the CSRF token.