How to Build & Launch Better Apps or Websites
Build a Vue project in Node
Build a Vue project without Node
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id=app> <div> <h1>/index.html - {{ title }}</h1> <p><span>{{ message }}</span> <input v-model="message" placeholder="Enter / Type Here..." autofocus /> </p> </div> <features></features> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/http-vue-loader"></script> <script> var vueApp = new Vue({ el: '#app', data: { title: 'Vue UI Dev Kit', message: '' }, components: { 'features': httpVueLoader('/src/guides/html/components/features.vue') } }) </script> </body> </html> <div id=app> <div> <h1>{{ title }}</h1> <p><span>{{ message }}</span> <input v-model="message" placeholder="Enter / Type Here..." autofocus /> </p> </div> <features></features> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/http-vue-loader"></script> <script> var vueApp = new Vue({ el: '#app', data: { title: 'Vue UI Dev Kit', message: '' }, components: { 'features': httpVueLoader('/src/guides/html/components/features.vue') } }) </script> </body> </html>Using double brackets {{ message}}, you can render a property (message) defined in the data object on the DOM.
<template> <div> <ol> <li>Vue Component.</li> </ol> </div> </template> <script> module.exports = { mounted() {}, }; </script> <style scoped> li { background-color: yellow; } </style>
<template> <div></div> </template> <script> export default { name: "feature-one", data() { return { users: [], }; }, methods: { getUsers() { return []; }, }, }; </script> <style scoped> li {background-color: yellow;} </style>
<template>
<div>
<h6>List Users</h6>
<ul>
<li v-for="user in users" :key="user.id">email: {{ user.email }} </li>
</ul>
</div>
</template>
<script type="ts">
/* import Api from "../services/http"; */
export default {
name: "list-user",
data() {
return {
user: []
};
},
methods: {
listUsers() {
/* replace with an api call to get users */
/*
Api.get("/list").then(result => {
console.log({ result: result });
});
*/
return [{id:1, email: 'john@john'}, {id:2, email: 'steve@stev.com'}, {id:3, email: 'peter'}]
}
}
};
</script>
</div>
</template>
<script type="ts">
import Api from "../../services/http";
export default {
name: "list-user",
data() {
return {
user: []
};
},
methods: {
listUsers() {
/* replace with an api call to get users */
/*
Api.get("/list").then(result => {
console.log({ result: result });
});
*/
return [{id:1, email: 'john@john'}, {id:2, email: 'steve@stev.com'}, {id:3, email: 'peter'}]
}
}
};
</script>
<template> <div> <form> <label>Email:</label> <label for="title">Email</label> <input type="text" class="form-control" id="email" v-model="user.email" /> <button @click="subscribe()">Subscribe</button> </form> </div> </template> <script type="ts"> import Api from "../../services/http"; export default { name: 'subscribe-user', data() { return { user: { email: '' } }; }, methods: { subscribe() { Api.post('/subscribe', this.user).then(result => { console.log({ result: result }); }); } }, mounted() {}, computed: {} }; </script>
Vuex manages global data in a Vue app and acts as a single source of truth so that data changes or mutates predictably
Vuex state management is architected around the concepts of:
Create a global Vuex store in your Vue main.ts file
import { createApp, h } from "vue"; import { createStore } from 'vuex'; import router from "./router"; import App from "./App.vue"; const store = createStore({ state: { user: null }, getters: { getUser(state) { return state.user }, }, mutations: { setUser (state, user?:any) { state.user = user; }, }, actions: { setUser(context, user: any){ context.commit('setUser', user); } }, modules: {} }); const app = createApp({ // root instance definition render: () => h(App) }).use(router); app.use(store); app.mount("#app");