djorborn/layout.pug

## layout.pug
<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title Pug Vue Play
        script(src="js/vue.js")
    body
        h1 Pug Vuejs Play
        h3 I want to see how to better intigrate vuejs with pug.

        p I will send data from the server to pug and try to attach that to a vue data variable.
        ol
            li: p I sent an stringyfied object to pug from server in variable stuff.
            li: p Then I made a vue data variable and passed it stuff by json parse'n it after replacing &quot; w/ "

        fieldset#app
            legend App
            p {{stuff}}
            ul(v-for="i in stuff")
                li {{i}}

    script.

        var vm = new Vue({
            el: '#app',
            data: {
                stuff: JSON.parse('#{stuff}'.replace(/&quot;/g, '"'))
            }
        })

## server.js
const express = require('express')
const app = express()

app.set('view engine', 'pug')
app.set('views', require('path').join(__dirname, 'app/views'))
app.use(express.static(__dirname + '/app/public'))

app.get('/', (req, res) => {
  res.render('vue', {
    stuff: JSON.stringify({
      one: 'One',
      thing: 'That One Thing',
      title: 'Pugjs Vuejs Play',
      items: [
        'One',
        'Two',
        'Three'
      ]
    })
  })
})

app.listen(3000, () => {
  console.log('Server running @ localhost:3000')
})
	<!DOCTYPE html>
	html(lang="en")
	head
	meta(charset="UTF-8")
	meta(name="viewport", content="width=device-width, initial-scale=1.0")
	meta(http-equiv="X-UA-Compatible", content="ie=edge")
	title Pug Vue Play
	script(src="js/vue.js")
	body
	h1 Pug Vuejs Play
	h3 I want to see how to better intigrate vuejs with pug.

	p I will send data from the server to pug and try to attach that to a vue data variable.
	ol
	li: p I sent an stringyfied object to pug from server in variable stuff.
	li: p Then I made a vue data variable and passed it stuff by json parse'n it after replacing " w/ "

	fieldset#app
	legend App
	p {{stuff}}
	ul(v-for="i in stuff")
	li {{i}}

	script.

	var vm = new Vue({
	el: '#app',
	data: {
	stuff: JSON.parse('#{stuff}'.replace(/"/g, '"'))
	}
	})
	const express = require('express')
	const app = express()

	app.set('view engine', 'pug')
	app.set('views', require('path').join(__dirname, 'app/views'))
	app.use(express.static(__dirname + '/app/public'))

	app.get('/', (req, res) => {
	res.render('vue', {
	stuff: JSON.stringify({
	one: 'One',
	thing: 'That One Thing',
	title: 'Pugjs Vuejs Play',
	items: [
	'One',
	'Two',
	'Three'
	]
	})
	})
	})

	app.listen(3000, () => {
	console.log('Server running @ localhost:3000')
	})