How to use vue.js in expressjs with pug

To use Vue.js in Express.js with Pug, you need to follow these steps:

1. Install Vue.js: Begin by installing Vue.js using npm (Node Package Manager) in your Express.js project. Open your terminal and navigate to your project directory. Then, run the following command:

npm install vue

1. Create a Vue component: In your Express.js project, create a new directory called "components" (or any name you prefer) to store your Vue component files. Inside this directory, create a new file called "example.vue" (or any name you prefer) and define your Vue component code in it. For example:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Vue is awesome!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

1. Set up a route in Express.js: Open your Express.js application file (usually app.js or index.js) and add a route that will render the Pug template file. For example:

const express = require('express');
const app = express();

app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(3000, () => {
  console.log('Express server listening on port 3000');
});

1. Create a Pug template: Inside your Express.js project, create a new directory called "views" (or any name you prefer) to store your Pug template files. Inside this directory, create a new file called "index.pug" (or any name you prefer) and define your Pug template code in it. For example:

doctype html
html
  head
    title My Vue App
    script(src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js')
  body
    #app
      script.
        var app = new Vue({
          el: '#app',
          components: {
            'example': httpVueLoader('/path/to/components/example.vue')
          }
        })
        | h1 My Vue App
        | example

1. Include Vue.js and your Vue component: In the Pug template file, include the Vue.js library by adding the script tag with the source pointing to the CDN (Content Delivery Network) link. Additionally, include your Vue component by adding the example custom element within the #app div.

2. Start the Express.js server: Finally, start your Express.js server by running the command node app.js (or the name of your application file) in your terminal. You can then access your Vue.js with Express.js application by navigating to http://localhost:3000 in your browser.

By following these steps, you can use Vue.js in Express.js with Pug.