Skip to content

Instantly share code, notes, and snippets.

@greencoder

greencoder/app.js

Created June 16, 2021 19:13
Show Gist options
  • Save greencoder/640d7ad586e4c2858ef7a852f37fa728 to your computer and use it in GitHub Desktop.
Save greencoder/640d7ad586e4c2858ef7a852f37fa728 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js Boilerplate (No CLI needed)
Raw
app.js
function main() {
window.app = new Vue({
el: 'div#app',
store: store,
data: {
message: 'Hello from Vue!'
},
mounted() {
this.$store.commit('updateColor', 'purple');
},
computed: {
bestColor() {
return this.$store.getters.bestColor;
}
}
})
}
Raw
components.js
Vue.component('sample-component', {
template: '<div>I was told the best color is {{ color }}.</div>',
props: [
'color'
]
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tiny Vue Boilerplate</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@2.0.0/dist/vuex.js"></script>
<script src="components.js"></script>
<script src="state.js"></script>
<script src="app.js"></script>
<script>
window.addEventListener('DOMContentLoaded', main);
</script>
</head>
<body>
<div id="app" v-cloak>
<sample-component v-bind:color="bestColor"></sample-component>
</div>
</body>
</html>
Raw
state.js
const store = new Vuex.Store({
state: {
bestColor: 'blue'
},
mutations: {
updateColor(state, newColor) {
state.bestColor = newColor;
}
},
getters: {
bestColor(state) {
return state.bestColor;
}
}
});
Raw
styles.css
body {
margin: 25px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment