I’m now looking into using Vue in an existing project as a replacement for jquery. I followed The Vue getting started guidelines and was able to recreate all functionality using vue. I created multiple single file component (.vue files) and use http-vue-loader to load them in my existing templates:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/http-vue-loader"></script>
<script>
new window.Vue({
el: '#app',
components: {
'user-button': window.httpVueLoader('components/UserButton.vue'),
'like-button': window.httpVueLoader('components/LikeButton.vue'),
...
},
})
</script>
This works fine, I can now simply include
<user-button></user-button>
in the template, which renders the user button as expected.
I’m now looking into optimising my code, but I’m unable to find any information on how to proceed. Can I use this code in production and use http-vue-loader to import the components, or is there a way to build the code using vue-cli or webpack? I’m only using vue to add additional features to the website. The main content is generated server side. The Vue components need to be added to this content.
I tried adding the components to a sample project created using vue-cli, and building the scripts. This works fine, however I cannot use the scripts on my website. Embedding the scripts causes all existing content in the in=“app” container to be replaced.
Can anyone point me in the right direction on how I should proceed?
First of all what 'optimization' are you talking about? If everything works correctly I don't understand what is your question about.
About building with vue-cli, if your application already uses id app somewhere, you can simply configure vue to render it's contents into div with any other id. Just open index.js and specify your custom id in $mount function.