Add Vue to and Lodash to a empty SailsJS app

I the previous posts we added Bootstrap and Parasails to our empty SailsJS app – it’s time to add the last couple of components now, Vue & Lodash – we’ll do this by installing them via npm and copying them over to the dependencies folder via Grunt.

First off run

$ npm i vue lodash --save

Now we need to copy them from the node_modules folder into dependencies, head to tasks/config and in copy.js add the following below the previous commands you added to copy over boostrap

// tasks/config/copy.js
...

{
  expand: true,
  cwd: './node_modules',
  src: ['@sailshq/lodash/lib/index.js'],
  dest: './assets/dependencies/lodash',
  flatten: true,
},
{
  expand: true,
  cwd: './node_modules',
  src: ['vue/dist/vue.js'],
  dest: './assets/dependencies',
  flatten: true,
},

We now just need to load them via the asset pipeline, in pipeline.js add the following

// config/tasks/pipeline.js

'dependencies/bootstrap/dist/js/bootstrap.js',
'dependencies/lodash/*.js',
'dependencies/cloud.js',
'dependencies/vue.js',
'dependencies/parasails.js',

Make sure lodash is loaded before other dependencies else you’ll get an error in the console.

That’s it then, we have all the dependencies we need to get everything working. we’ll add a few other components over the next few posts including logging in via Google OAuth and passport.