Multi tool use

Vue.js and structuring multi-page web apps - component registrations

I want to use Vue.js for a MVC Core 2.1 multi-page web app, but I think my approach is a bit quirky.

I have searched a lot for a better way to structure my code. I also took a look at how PHP Laravel 5.x does it, and it seems like they take the same approach as the one I use, kinda.

I have created a main.js file where I register some of the components globablly, and the ones that are only used by specific components will of course be registered only locally. So, basically every page will have it's own component registered gloablly... (btw I use Webpack)

main.js

import Vue from 'vue';
import Axios from 'axios';

import BaseLayout from './components/layout/BaseLayout.vue';
import BaseHeaderLayout from './components/layout/BaseHeader.vue';

import HomeIndex from './components/home/Index.vue';
import HomeCreate from './components/home/Create.vue';

import 'bootstrap/dist/css/bootstrap.css';

window.axios = Axios; // Make axios available throughout (assign as global variable)

// Layout components
Vue.component("base-layout", BaseLayout);
Vue.component("base-header", BaseHeaderLayout);

// Home/
Vue.component("home-index", HomeIndex);
Vue.component("home-create", HomeCreate);

new Vue({
el: "#App"
});


As the web app grows, I guess this file will become massive - stuffed with component registrations. So my question is: Is there another way to do this?

1 Answer
1

you can use vue-cli to structure you project (https://github.com/vuejs/vue-cli) which is now a release candidate version and integrates webpack by default. With the command "vue create my-project" you will see a nice scaffolding of your project. In the main.js you would only put you root component.
Sorry for the bad formatting I am on mobile.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.