ホーム > Laravel > How to set absolute path for importing Vue components in Laravel
Laravel

How to set absolute path for importing Vue components in Laravel

Thank you for your continued support.
This article contains advertisements that help fund our operations.

Table Of Contents

  1. Conclusion First
  2. Summary
オススメ本

⇨ Laravel Article Index Here

When using Vue components in Laravel, it's convenient to set the hierarchy to an absolute path. This makes it easier to change the folder structure as the project grows. This article explains how to set it up.

Conclusion First

Add the following to webpack.mix.js:

mix.webpackConfig({
  resolve: {
    alias: {
      "@": path.resolve("./resources/js"),
    },
  },
})

That's it!

Depending on your version of Laravel, it might be:

"./resources/assets/js"

By writing it this way, you can import js/components/AppComponent as:

import AppComponent from "@/components/AppComponent"

Summary

How was it?

That's how you specify Vue components with an absolute path in a Laravel project.

Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!