Sails js v1.1 using two front end “controllers” parasails error (vue.js)

Question

In a previous project with Sails version (0.12), I divided my layout.ejs file to manage a top bar and footer separately from the body. It looked like

<%- partial('./partials/topnav.ejs') %>
<!-- begin::Body -->
<%- body %>
<!-- end:: Body -->
<%- partial('./partials/footer.ejs') %>

I was using AngularJS. The top bar was wrapped in a controller, and the body was wrapped in a different one. Basically in the partials, the code looked like

<div ng-controller="topnavCtrl" ng-cloak>
    //My topnav code
</div>

...

 <div ng-controller="aPageCtrl" ng-cloak>
    //My page code
 </div>

I thought I could do something similar with Sails js 1.1, started with option 1 for Web App, but because it's not AngularJS but Vue.js and the parasails, I have no idea how to fix the error I'm getting :

Whoops An unexpected client-side error occurred. Cannot load page script (`topnav) because a page script has already been loaded on this page. Please check your browser's JavaScript console for further details. This message will not be displayed in production. If you're unsure, ask for help. Mon Mar 04 2019 16:32:05 GMT-0500 (EST)

And the browser console says :

[Error] Error: Cannot load page script (`topnav) because a page script has already been loaded on this page. registerPage (parasails.js:710:156) Global Code (topnav.page.js:1)

My topnav partials have

<div id="topnav" v-cloak>
    //My topnav code
</div>

If I remove the <div id="mypage" v-cloak> from my "body" page, the error is gone.

Obviously, it has something to do with Parasails, but is there a way to use two "controllers" for a page in sails v1 ? (I call them controllers because in Sails 0.12 with AngularJS they were called controller, now I just have no idea what they are !)

Answer 1

You should be able to this with out issue in Sails V1.

What you had initially should still work:

<%- partial('./partials/topnav.ejs') %>
<!-- begin::Body -->
<%- body %>
<!-- end:: Body -->
<%- partial('./partials/footer.ejs') %>

Though its suggested you name your files footer.partial.ejs

Your partials dont need to be wrapped in a controller you can simply call them based on a class or id, which ever you prefer.

Also on your partial's .ejs file you dont want to have 'v-clock' on it because that should already exist on your individual .ejs files.

So:

<div id="topNav">
 //top nav code
</div>

<div id="homepage" v-clock>
  <%- partial('../../partials/topnav.partial.ejs') %>
 //homepage code
</div>

Note that since your injecting your partials into layout you wont need to add it on each page. I just wanted to show a clear example.