Vue app with .NET core backend api with Areas, using webpack, Vue is not loading

Question

I've recently taken on the task of merging 2 apps with a decent amount of overlapping functionality into one app. I'm using Vue as the front end library and consuming data from a .NET core back end. Webpack is providing all the other magic. I decided to use Areas to separate the disparate functionality, so I have 2 entry points in webpack.config.js.

module.exports = {
context: __dirname,
entry: {
    app1: "./app1/bootApp.js",
    app2: "./app2/bootApp.js"
}

When I run the application, I get the contents of index.cshtml but nothing else. Vue isn't being loaded.

I've defined routes for the areas like so: ` app.UseMvc(routes => { routes.MapRoute( name: "app1", template: "{app1:exists}/{controller=Home}/{action=Index}/{id?}" );

   routes.MapAreaRoute(
   name: "default",
     areaName: "app1",
     template: "{controller=Home}/{action=Index}/{id?}"
    );

and another one just like that route for app2. Because I can see the contents of index.cshtml for app1 I am really puzzled as to why Vue isn't loading. Barebones demo here.

db2 · Accepted Answer · 2019-02-01 16:35:15Z

0

After a day of digging around, I found a solution to the problem. The index.cshtml file was loading just fine, and there was an element with an id of app per convention, but I decided at first to try and forgo the framework default _Layout.cshtml file and _ViewStart.cshtml file. The layout file in other MVC apps we've integrated Vue into have an element in the head section that looks like this: <base href="/" />. In the router, we define the root route path as "/", so it seems that by skipping the layout file that included the base element, Vue didn't have anything to attach the root route to and all subsequent relative links to. So the index page rendered just fine, but Vue never loaded.

answered Feb 1, 2019 at 16:35

db2

3063 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue app with .NET core backend api with Areas, using webpack, Vue is not loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related