ホーム > 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

When using Vue components in Laravel, it is useful to set the hierarchy to an absolute path so that it is convenient to change the folder structure after the project grows. This is an article on how to configure it.

PR

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!