How to use VueJS and Jade

Question

I'm fairly new to VueJS, and I'm being tripped up on what seems to be a fairly trivial problem: how to use VueJS and Jade together?

Below is the code I'm trying to render in Jade:

extends layout

block content
    div.main-holder
        button(v-on:submit="handleIt")Button

However when I load the page I get this error:

/Users/username/Documents/app/app/views/index.jade:5 3| block content 4| div.main-holder > 5| button(v-on:submit="handleIt")Button Unexpected token tag expected text , code , : , newline or eos Error: /Users/username/Documents/app/app/views/index.jade:5 3| block content 4| div.main-holder

5| button(v-on:submit="handleIt")Button

Unexpected token tag expected text , code , : , newline or eos at Parser.tag (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:828:15) at Parser.parseTag (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:759:17) at Parser.parseExpr (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:211:21) at Parser.block (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:729:25) at Parser.tag (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:838:24) at Parser.parseTag (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:759:17) at Parser.parseExpr (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:211:21) at Parser.block (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:729:25) at Parser.parseBlock (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:535:14) at Parser.parseExpr (/Users/username/Documents/app/app/node_modules/jade/lib/parser.js:215:21)

I've tried escaping the button with the pipe character and a few other sequences but nothing seems to work. Any help would be greatly appreciated.

Answer 1

Turns out I was missing a space between button(v-on:submit="handleIt") and the word "Button." Fixed my own issue.