View Page Source shows raw code instead of rendered code

[slidenerd]

Apologies if this is a silly question

• I am using Bootstrap-Vue with this template + Laravel Mix and Vue + Bootstrap-Vue on top of it

• When I "View Page Source" it shows b-modal as it is without showing the final rendered html. Is this normally how it works, the page shows perfectly on the browser but the view page source contains raw code

The relevant part of my pug file looks like this

extends ../layout

block content
  .pb-2.mt-2.mb-4.border-bottom
    h3 Sign in
  #login
    p {{message}}
    div
      b-btn(v-b-modal.modal1='') Launch demo modal
      // Modal Component
      b-modal#modal1(title='Bootstrap-Vue')
        p.my-4 Hello from modal!

My app.js file looks like this

new Vue({
  el: "#login",
  data() {
    return {
      message: "Hey from login man!"
    }
  }
})

The layout uses pug filters to add the final JS files after laravel mix is done with them

This would be my laravel mix file

Here's the custom pug filter

app.set('view engine', 'pug');
// Middleware for Jade/Pug custom filter for use with Laravel Mix
app.use((req, res, next) => {
  app.locals.filters = {
    'mix': (text, options) => {
      if (!text) return
      text = text.replace(/["']/g, '')

      const manifest = require(__dirname + '/public/mix-manifest.json')
      if (options.css) return `<link rel="stylesheet" href="${manifest[text]}">`
      if (options.js) return `<script type="text/javascript" src="${manifest[text]}"></script>`
      return text
    }
  }
  next()
})

I am assuming the pug filter is missing something or I may be wrong, would be great if you could share some insight

[slidenerd]

tested a simple page with bootstrap-vue on it and still shows the source, guess thats the default behavior