Unable to navigate to a VueJS webapp from AngularJS index.html

Question

I was trying to merge AngularJS and VueJS projects together since we need to have a requirement of calling the flow designed in VueJS from inside an AngularJS app. For merging AngularJS and VueJS projects together, I included the dependencies in package.json file of Angular and Vue together and few other files too.

Now since both Vue and Angular have an index.html file created in the project root directory, I made the Angular one as my index.html file and renamed VueJS index file as index23.html. Then from the link from where I need to call VueJS flow, I provided the path in the router of AngularJS config file as shown:

'use strict';

app.config(function ($routeProvider) {
    $routeProvider
        .when("/errorinput", {
            templateUrl: "src/index23.html"
        });
});


app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
 // Implement me!
}]);

But on doing so, my VueJS page doesn't comes up but rather it comes up in background I think as current page gets surrounded with a white background on clicking that link. I am really not sure if I need to code something inside the app.controller method of above file since this is a Vue component which I am talking about.

Is there any way we can make this work? Please let me know if I need to provide additional details. Contents of index.html file from where this call is made are below:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>SEW Drive Status| </title>

    <!-- Bootstrap -->
    <link href="node_modules/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="node_modules/gentelella/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="node_modules/gentelella/build/css/custom.min.css" rel="stylesheet">

    <!-- Angular JS Material -->
    <link href="node_modules/angular-material/angular-material.min.css" rel="stylesheet">
    <!-- Angular JS Material -->
    <!--link href="public/material.css" rel="stylesheet"-->

  </head>
    <script src="node_modules/angular/angular.min.js" ></script>
    <script src="node_modules/angular-route/angular-route.min.js" ></script>
    <script src="node_modules/angular-aria/angular-aria.min.js"></script>
    <script src="node_modules/angular-material/angular-material.min.js"></script>

    <script src="app/app.js" ></script>
    <!-- custom control script section -->
    <script src="app/components/assetlist.js" ></script>
    <script src="app/components/errorinput.js" ></script>
    <script src="bundle.js"></script>

                      <li><a><i class="fa fa-edit"></i>Administration<span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                          <li><a href="#!errorinput"><i class="fa fa-database"></i>Manage Error Descriptions</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- /sidebar menu -->

This is the Angular page and link(Manage Error Descriptions) from where I need to call VueJS app:

White background issue:

errorinput.js file after adding the code:

     'use strict';

app.config(function ($routeProvider) {
    $routeProvider
        .when("/errorinput", {
            templateUrl: "views/errorinput.html"
        });
});


app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
 // Implement me!
 <template>
    <div class="container">
        <div>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>

<script>

    export default{
    }
</script>
}]);

Would it work if you created an angular view that's just an iframe, with a model that just has the url of the page that uses vue? Something like in the following answer, but I don't know how you would get state from angular to vue through the iframe. https://stackoverflow.com/questions/30380769/how-to-use-an-iframe-as-ngview — Matt, Feb 09 '18 at 17:50
I already tried it and it works. But no when the page I am loading is from VueJS. Here, if it is from AngularJS, it loads fine. But when it is in Vue, no luck. It gives me a blank frame. — CodeHunter, Feb 09 '18 at 17:52

score 1 · Accepted Answer · answered Feb 09 '18 at 18:14

1

Vue and Angular can co-exist on a page just fine.

Because you're using Angular to render Vue's HTML, you'll need to make sure your Vue initialization fires after the new HTML is rendered. You could accomplish this a couple of ways:

Paste your Vue script where it says // Implement me in your code above
Use a hook in your Angular router to load your Vue-specific .js file after the route has loaded

First option is probably more performant, while second option probably keeps your dev setup cleaner.

answered Feb 09 '18 at 18:14

Tyler

11,272
9
65
105

First of all thank you so much for responding to me question. I have been searching all over the internet for help. The first option you told, can you provide an example if possible? I don't think I can provide my Vue code directly in this method, can we? – CodeHunter Feb 09 '18 at 18:20
When I tried the first option, it gives me the same behavior as before which I mentioned in OP of getting white background launched. Let me upload the screenshot of that. – CodeHunter Feb 09 '18 at 18:29
Code is much more helpful than a screenshot, so if you can add that somewhere it is much better. – Tyler Feb 09 '18 at 18:44
added code. Please check. This is the app.vue code that you told in option1 to add in errorinput.js file. – CodeHunter Feb 09 '18 at 18:59
Yeah you're not going to be able to just paste in a `.vue` template. You'll either need to write your component in javascript or use method #2 I mentioned to load the bundle once the route loads. – Tyler Feb 09 '18 at 19:26
Can you provide an example maybe? – CodeHunter Feb 09 '18 at 19:45

Unable to navigate to a VueJS webapp from AngularJS index.html

1 Answers1

Linked