CMS Development

Craig
Colaborador líder

Vue.js into single file

resolver

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.

 

1 Soluciones aceptada
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Vue.js into single file

resolver

@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.

Ver la solución en mensaje original publicado

2 Respuestas 2
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Vue.js into single file

resolver

@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
Colaborador líder

Vue.js into single file

resolver

@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
    }
  }