duffpod/sails-js-express-vue-instructions.md

## sails-js-express-vue-instructions.md

      
    Raw
  

              sails-js-express-vue-instructions.md
            
          
Generate a Sails project with sails new your-app --no-frontend
Install express-vue with npm install express-vue --save
Go to the view config of Sails app at your-app/config/views.js and replace the engine: 'ejs', with this:

  engine: {
    ext: 'vue',
    fn: (function() {
      return require('express-vue');
    })()
  },

Also need to set the layout: 'layout', to layout: false, as it will be ignored by Sails anyway.

Now we need to create views folder in the Sails app. mkdir your-app/views/ && touch your-app/views/homepage.vue. Note, that your-app/config/routes.js is already pointing the homepage-file to the localhost:1337/.
Edit the homepage.vue to add your Vue.js content to it, like:

<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
};
</script>

After all, go to the config/http.js in your project. There will be the middleware object. You need to add the customMiddleware function AFTER it, so everything looks like this:

module.exports.http = {
  middleware: {

  },
  customMiddleware: function(app) {
    app.set('vue', {
      // configure express-vue here
      // do not use __dirname here, otherwise the path will look like: 
      // /Users/username/your-project/config/components
      // componentsDir: app.settings.views + '/components',
    });
  }
};