Currently, I am in the process of developing a web application (specifically ASP.NET Core 2 MVC) that is not a single page application. Vue.js is being used to enhance the front-end functionality through a Vue instance. As the project progresses, there is a need to extract elements into reusable components which can be achieved alongside the Vue instance as shown below:
<script type="text/javascript" src="/js/dev/vue.js"></script>
<div id='app'>
<my-component message="Hi there!" />
</div>
<script>
Vue.component('my-component', {
template: '<p>{{ message }}</p>',
props: { message: String }
});
var app = new Vue({ el: '#app' });
</script>
I am eager to define my components using Vue's single file components with a .vue extension rather than the current method, but most resources and tutorials available focus on SPAs. Modifying this information to suit my needs has proven challenging.
Experimenting with the Vue CLI, I have managed to configure it to build a library instead of an SPA by utilizing its bundled webpack configuration. However, the output consists of a single UMD or CommonJS bundle file which I am unsure how to utilize effectively.
Although I lack experience with webpack, I am prepared to learn. While Gulp is currently being used for other tasks within the project, I am open to transitioning to webpack if necessary for integrating Vue single file components successfully.