![Cover image for enchantedForest[2]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0rdt4xtnglfjucex5t6x.png)
Today we added Vue to our project!
We felt like this was going to be better than integrating something like React or Angular with Flask.
Vue is pretty cool.
Basically what you do is something like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style type="text/css" media="screen">
#blah2 {
background-color:red;
color:white;
}
</style>
</head>
<body>
<div id="hmmm">
<h1 v-for="i in asdf" :id="'blah'+i">
<i>
blah {{ i }}
</i>
</h1>
</div>
<div id="app">
<h1 v-for="item in items" :key="item.message">
<b>
{{ item.message }}
</b>
</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {
items: [
{ message: 'Hello Vue!', isComplete: true},
{ message: 'Hello Vue!', isComplete: true},
{ message: 'Hello Vue!' },
{ message: 'Hello Vue!' },
{ message: 'Hello Vue!' },
{ message: "Bar"}
]
}
});
var blah = new Vue({
el: '#hmmm',
data: {
asdf: [0,1,2,3,4]
}
});
</script>
</body>
</html>
Pretty cool! (to run it, just do python3 -m http.sever, we're using CDNs so no installs necessary)
One thing that we ran into while doing this was
how to integrate Vue with Flask.
In particular, jinja template stuff collides with Vue (both use "mustaches" i.e. {{ }} for stuff).
So the way we fixed this, was we just loaded the js thing as a static page. Vue is a tool for making static pages, so this works fine!
Here's the code:
return app.send_static_file('index.html')
And, something that I found kind of surprising is that we were still able to do jquery requests even though the page is static!
So yay! probably next time we can integrate mongodb with our game.
- copolla
Top comments (0)