Use with Laravel Vapor

[Matt Bartel]

I'm using Vue CLI3 to generate my index.blade.php in production. The issue I'm having is that Vapor expects asset URLs to have the Laravel asset() helper around them so that it can replace those URLs with the CDN urls.

Any ideas on how to replace the injected html-webpack-plugin urls with ones wrapped by the asset helper?

[Baldwin Martinez]

Not sure if you were able to figure this out, but here's how I solved this.

Under build in your vapor.yml file, you can write a command to copy your Laravel .env file into the root of your Vue project. Then in the vue.config.js (at the root of your Vue project), set ASSET_URL as your publicPath, like this:

module.exports = {
  ... 
  publicPath: process.env.ASSET_URL + '/',
  ... 
}

(Remember this file needs to be copied before running the build script for Vue)

How this works.

When deploying to Vapor, during the build process the ASSET_URL environment variable is automatically appended to the last line of the .env files in the root of your Laravel project. Luckily for us, Vue CLI projects also use .env files, so we can just copy the modified Laravel .env file into the root of our Vue Project.

I apologize for the over explanation, just trying to be as detailed as possible 😅. Hoping this helps someone out there 👍.

[Matt Bartel]

@bmarz Awesome, thanks for that explanation. Works like a charm.

Before I saw your response, I ended up just reproducing my Vue CLI webpack setup inside Laravel Mix (so essentially using Vue CLI for the initial setup, but not for ongoing builds).