define vue application in blade component

You can use one Vue app declaration by HTML container. You can’t use one declared component inside other declared component.

So you can do this. 

<!DOCTYPE HTML>
<html lang="en">
    <head>
      .....
    </head>
    <body>
        <!-- MAYBE YOU CAN DO A BLADE TEMPLATE -->
        <div id="navitagion"></div>  
        <div id="app"></div>  
        <!--=============== scripts  ===============-->
        <script type="text/javascript" src="https://stackoverflow.com/questions/53887003/{{asset("path/to/vue.js')}}"></script>
        const app = new Vue({
           el: '#app',
        });
        const navigation = new Vue({
           el: '#navigation',
        });
    </body>
</html>

You can add references in any container to use outside of Vue declaration like javascript or in other Vue component

But try and let me know how it works 🙂

Leave a Comment