How to use vue.js in expressjs with pug

Question

Here is my code i tried

In my .pug

extends layout

block content
  h1= title
  p Welcome to #{title}
  script(src='/javascripts/custom_vue.js')
  div(id="app")
    {{ message }}

custom_vue.js

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

error:

D:\xampp\htdocs\test\express\report\views\vue.pug:8:9 6| script(src='/javascripts/custom_vue.js') 7| <div id="app"> > 8| {{ message }} ---------------^ 9| </div> unexpected text "{{ me"
Error: D:\xampp\htdocs\test\express\report\views\vue.pug:8:9
    6|   script(src='/javascripts/custom_vue.js')
    7|     <div id="app">
  > 8|         {{ message }}
---------------^
    9|     </div>

unexpected text "{{ me"
    at makeError (D:\xampp\htdocs\test\express\report\node_modules\pug-error\index.js:32:13)
    at Lexer.error (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:58:15)
    at Lexer.fail (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1304:10)
    at Lexer.advance (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1364:15)
    at Lexer.callLexerFunction (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1319:23)
    at Lexer.getTokens (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1375:12)
    at lex (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:12:42)
    at Object.lex (D:\xampp\htdocs\test\express\report\node_modules\pug\lib\index.js:99:27)
    at Function.loadString [as string] (D:\xampp\htdocs\test\express\report\node_modules\pug-load\index.js:44:24)
    at compileBody (D:\xampp\htdocs\test\express\report\node_modules\pug\lib\index.js:86:18)

Answer 1

We're using vue.js with pug and loving it.

Pug needs to know what type of element you want to render that message into, just add a div or a span at the front of the line and everything will work properly:

div {{message}}

The same thing would happen if without vue.js you just tried to render text into a page. This would cause an error:

div
  This is some text

You could also use the Plain Text command (|) to accomplish what you want:

| {{message}}

or

div
  | This is some text

FYI, we're also using inline components with script tags in separate pug files instead of using the CLI:

script(type="text/x-template" id="my-component")
  div
    (html goes here)

script.
  var MyComponent= Vue.component({
    "template": '#my-component',
    <rest of the code goes here>
  });