How use a ExpressJS, VueJS, Jade together?

Question

What is the best practice to use ExpressJS, VueJS and Jade together?

It's a little bit stupid question, but do I need convert Jade to HTML (like I know, because VueJS can't serve Jade files)?
Do i need serve a Jade or converted HTML index file in ExpressJS?

Without using VueJS, code in my index.js file is something like this:

app.set("view engine", "pug");
app.set("views", __dirname + "/templates");


app.get('/', function(req, res){
  res.render("index");
});

And when I want to use Gulp, then.. how?

Answer 1

ExpressJS lives at the back-end and uses your .jade (actually renamed as .pug) templates to generate and serve html. And that's all, next, you can use Vue (client side framework) to develop anything you want.

So, what you can do is, create a .jade template (.pug) like this:

...
    body
        p {{message}}

    script(src='path/to/vue.js')
    script.
        const app = new Vue({
            el: 'body',
            data(){
                return {
                    message: 'Hello World!'
                }
            }
        });

It is a simple example. The important thing is that you just are serving a .jade like always, and then, you include the vue library to use it.

Later, you can approach a better front-end development using Gulp and Webpack-Stream tools to compile .vue files.

A gulpfile.js like this, to compile all scripts of your app:

gulp.task('scripts', () => {
    return gulp.src("resources/assets/js/main.js")
        .pipe(named())
        .pipe(webpack(require('./webpack.config')))
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(through.obj(function (file, enc, cb) {
            // Dont pipe through any source map files as it will be handled
            // by gulp-sourcemaps
            var isSourceMap = /\.map$/.test(file.path);
            if (!isSourceMap) this.push(file);
            cb();
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest("./public/js"))
        .pipe(notify("Scripts compiled"));
});

The content of your webpack.config.js could be:

module.exports = {
    devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.vue/, loader: 'vue' },
        ],
    },
};

*Note that you will need the vue-loader package to let Webpack compile .vue files

By this way you will be able to develop a complete Express & Jade + VueJS application.

I hope it helps.

Answer 2

You need to compile jade file into HTML. I used prepros for compiling. But I already transfer to haml instead of jade. But this will work perfectly.

for inline javascript. Use this

script.
    if(usingJade)
        console.log('you are awesome')
    else
        console.log('you are not awesome');

Answer 3

In general case - using of webpack is already enough for goal. I have similar case before with entry jade template and .vue files. Based on this example