[Vuejs]-Single file component with server side rendering in Vue.js

by

1👍

There is now a package that does this called express-vue

I am having great success with it, and it still supports components, mixins, etc

“The idea is simple use Node+Express for your Controller and Models, and Vue.js for your Views.”

https://www.npmjs.com/package/express-vue courtesy of danmademe

From the npm page:

Usage
This is the minimum required setup. If you don’t provide a vueVersion it will use the latest one when the project was published. If there is no rootPath it will assume the root is the parent directory of node_modules.

var expressVue = require("express-vue");

var app = express();

const expressVueMiddleware = expressVue.init();
app.use(expressVueMiddleware);

In your route, assuming you have a main.vue

router.get('/', (req, res, next) => {
    const data: {
        otherData: 'Something Else' 
    };
    req.vueOptions: {
        head: {
            title: 'Page Title',
            metas: [
                { property:'og:title', content: 'Page Title'},
                { name:'twitter:title', content: 'Page Title'},
            ]
        }    
    }
    res.renderVue('main.vue', data, req.vueOptions);
})

To use Data binding into the vue files you need to pass data in through the data object as above. express-vue will automatically add anything you put here to the root element of your Vue components. You do not need to have anything in data in your .vue file, but if you did what you put in res.render will overwrite it.

👤Tom

-1👍

No you can’t.

Vue (.vue) files are not regular javascript files, so they need to be transpiled into .js to be read by any NodeJS process.

You have several options there, if you don’t wan’t to use webpack (while I strongly advise you to give it a try):

  • You can use Vueify with Gulp, using gulp-vueify2 (I must mention that I am the author of this package).
  • Or, probably the recommended way, you can use Nuxt as a
    middleware.
👤FitzFish

Leave a comment