Vue Answers

How to use Express handlebars with Vue.js?

Spread the love

Using Express.js with Handlebars as the templating engine alongside Vue.js can be achieved, but we need to keep in mind that Handlebars and Vue.js serve different purposes in the application architecture.

Handlebars is typically used on the server-side to render dynamic content before it’s sent to the client, while Vue.js operates on the client-side to handle dynamic updates and interactions once the page is loaded.

Here’s a basic approach to using Express.js with Handlebars for server-side rendering and Vue.js for client-side interactivity:

1. Set up our Express.js server with Handlebars as the view engine

Install necessary dependencies:

npm install express express-handlebars

Configure our Express server to use Handlebars:

const express = require("express");
const exphbs = require("express-handlebars");

const app = express();

// Configure Handlebars
app.engine("handlebars", exphbs());
app.set("view engine", "handlebars");

// Define routes
app.get("/", (req, res) => {
  res.render("index", {
    // Pass data to our Handlebars template if needed

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);

2. Create a Handlebars template

Create a Handlebars template (e.g., views/index.handlebars) where we include Vue.js and define an element to mount our Vue app:

<!doctype html>
    <title>Vue.js with Handlebars</title>
    <div id="app">
      <!-- Vue.js components will be rendered here -->
    <script src=""></script>
    <script src="/js/app.js"></script>
    <!-- Include our Vue app script -->

3. Set up our Vue.js application

Create our Vue app script (e.g., public/js/app.js):

new Vue({
  el: "#app",
  data: {
    message: "Hello from Vue!",

4. Start building our Vue components

We can now start building Vue components as usual. These components will be mounted on the element with the ID app within the Handlebars template.

With this setup, Express.js with Handlebars handles the initial server-side rendering, while Vue.js takes over the client-side interactivity after the page is loaded.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *