Vue.js into single file

[Craig]

Hi all - we are looking at building a relatively complex LP using Vue.js.

Really we want to build this locally, using single file components etc and compiling with webpack.

I'm wondering if anyone has had experience building a Vue.js app and compiling to a single file with webpack for example - similar to here - and launching on HubSpot?

I appreciate we'd still need to upload the file via FTP, but we'd be able to leverage all the benefits of the build tools, plus source control.

Thanks in advance.

[tjoyce · Accepted solution]

@Craig - I wrote a blog post that would be similar to what you're looking for. This example uses gruntjs but your vue.js with webpack should work the same. Just make your /dist folder sync with the FTP drive in HubSpot, and leave your /src/ files in the directory that doesn't sync with the FTP

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[Craig]

@tjoyce sorry for the delay - I got caught up actually building the thing!!

Great post, and for anyone doing this specifically with Vue, you can use the following to skip the chunking of js files if you are struggling with paths etc. Add to vue.config.js (may need to create the file if it doesn't exist yet)

configureWebpack: {
    optimization: {
      splitChunks: false
    }
  }