How to combine node and vue?

Question

JavaScript

Help who knows. I have a set of files (see the screenshot) . I'm wondering how you can connect vue through browserify to a nodeJs project. In app.js simple server creation (express)

var express = require('express'),
  bodyParser = require('body-parser'),
  app = express();

app.use( bodyParser.urlencoded({ extended: true }) );
app.use( bodyParser.json() );

var post = [
  {
    title: 'my first post',
    status: 'low'
  },
  {
    title: 'my second post',
    status: 'low'
  }
]

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

app.listen(3000, function(){
  console.log('This server working on 3000 port');
});

.
I also have main.js (entry point for vue) which is converted to build.js and how can I put build.js connection in App.js to render index.vue.

Answer 1

https://en.nuxtjs.org/

Answer 2

Why does the node need to render the View?
This is the front, and the node is the back.
The node returns data and an "empty" page with app.js connection
This is all the node has to do.

Answer 3

Install https://www.npmjs.com/package/vue-template-compiler
npm i -S vue-template-compiler
Patch require:

'use strict';

const fs = require('fs');
const compiler = require('vue-template-compiler');

require.extensions['.vue'] = (module, filename) => {
    let file = fs.readFileSync(filename, 'utf8');
    let {script, template} = compiler.parseComponent(file);
    let {render, staticRenderFns} = compiler.compile(template.content);
    let result = `(function(){'use strict';${script.content}})();Object.assign(module.exports,{render:function(){${render}},staticRenderFns:[${staticRenderFns.map(code => {
        return `function(){${code}}`;
    }).join(',')}]});`;
     module._compile(result, filename);
};

after that we can connect the .vue components through the usual require as in webpack / browsirity PS checked in the render process of the electron, but in node it should also work new Vue(require('./App.vue'))

Answer 4

https://ssr.vuejs.org/ru/