Created
April 9, 2018 18:18
-
-
Save djorborn/cb61f30d9598cbb7fc42c7494281af1b to your computer and use it in GitHub Desktop.
Send Object to a script tag using Pugjs, For the purpose of using the object with Vuejs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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, '"')) | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment