Skip to content

Instantly share code, notes, and snippets.

@TutorialDoctor

TutorialDoctor/vue_vuex.html

Last active January 18, 2020 20:00
Show Gist options
  • Save TutorialDoctor/65f5f716042ade24dd52c392dcd5ad88 to your computer and use it in GitHub Desktop.
Save TutorialDoctor/65f5f716042ade24dd52c392dcd5ad88 to your computer and use it in GitHub Desktop.
Download ZIP
Vue Vuex Tailwind and Axios in a single HTML file
Raw
vue_vuex.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.css">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="app" class="w-full">
<div class="container mx-auto justify-center">
<h1 class="text-3xl text-gray-900">{{welcome}}</h1>
<p class="text-gray-700">{{message}}</p>
<p class="text-gray-700">{{get_message}}</p>
<p class="text-gray-700">{{get_count}}</p>
<p class="text-gray-700">{{count}}</p>
<button @click="pressed" class="rounded bg-blue-800 text-white hover:bg-blue-600 px-4 py-2">Increment</button><br>
<a class="text-red-600" href="https://www.youtube.com/watch?v=LW9yIR4GoVU">Based on this Tutorial</a>
<p>{{results}}</p>
<h2 class="text-3xl" >Feedback</h2>
<p>{{feedback}}</p>
<hr class="m-6">
<!--PostSearch-->
<input v-model="name"
placeholder="Search for..."
aria-label="Search"
class="transition bg-white shadow-md focus:outline-0 border border-transparent placeholder-gray-600 rounded-lg py-2 pr-4 pl-10 block w-full appearance-none leading-normal ds-input"
placeholder="Enter search term" autocomplete="off"
type="text">
<h3>{{name}} Appears in: <b>{{filteredList.length}}</b> posts</h3>
<!--PostSearch-->
<!--POSTS-->
<h2 class="text-3xl" >Posts</h2>
<p class="hidden">{{posts}}</p>
<div v-for="(post,ndx) in filteredList" :key="ndx" class="text-center filterable lg:flex lg:flex-wrap relative mt-3 md:text-left w-full shadow-md p-4 leading-normal cursor-pointer border-l-2 bg-gray-100 border-gray-500 leading-normal">
<span class="m-3 text-gray-700 text-1xl font-bold">{{post.title}}</span>
<div class="ml-3 m-3">
<span class="badge badge-pill bg-purple-200 text-purple-800 rounded-full py-2 px-4">{{post.id}}</span>
</div>
<div class="ml-3 m-3 ">
<span class="rounded bg-gray-300 text-gray-700 px-2 py-1">Jan-01-2018</span>
<span class="text-gray-800 font-bold">to</span>
<span class="rounded bg-gray-300 text-gray-700 px-2 py-1">May-08-2018</span>
</div>
<div class="absolute top-0 right-0 mr-2 my-2">
<div class="block"><a href="#"><i class="fas fa-eye text-gray-600 hover:text-gray-900" aria-hidden="true"></i></a></div>
<div class="block"><a id="btn-edit" href="#"><i class="fas fa-edit text-gray-600 hover:text-gray-900" aria-hidden="true"></i></a></div>
<div class="block"><a data-confirm="Are you sure?" data-remote="true" rel="nofollow" data-method="delete" href="#"><i class="fas fas fa-trash text-gray-600 hover:text-gray-900" aria-hidden="true"></i></a></div>
</div>
</div>
<!--/POSTS-->
<!--TODOS-->
<h2 class="text-3xl" >Todos</h2>
<p class="hidden">{{todos}}</p>
<div v-for="todo in todos" :key="todo.id" class="text-center filterable lg:flex lg:flex-wrap relative mt-3 md:text-left w-full shadow-md p-4 leading-normal cursor-pointer border-l-2 bg-gray-100 border-gray-500 leading-normal">
<span class="m-3 text-gray-700 text-1xl font-bold">{{todo.title}}</span>
<div class="ml-3 m-3">
<span v-if="todo.completed" class="badge badge-pill bg-green-200 text-green-800 rounded-full py-2 px-4">complete</span>
<span v-else="todo.completed" class="badge badge-pill bg-red-200 text-red-800 rounded-full py-2 px-4">incomplete</span>
</div>
<div class="ml-3 m-3 ">
<span class="rounded bg-gray-300 text-gray-700 px-2 py-1">Jan-01-2018</span>
<span class="text-gray-800 font-bold">to</span>
<span class="rounded bg-gray-300 text-gray-700 px-2 py-1">May-08-2018</span>
</div>
<div class="absolute top-0 right-0 mr-2 my-2">
<div class="block"><a href="#"><i class="fas fa-eye text-gray-600 hover:text-gray-900" aria-hidden="true"></i></a></div>
<div class="block"><a id="btn-edit" href="#"><i class="fas fa-edit text-gray-600 hover:text-gray-900" aria-hidden="true"></i></a></div>
<div class="block"><a data-confirm="Are you sure?" data-remote="true" rel="nofollow" data-method="delete" href="#"><i class="fas fas fa-trash text-gray-600 hover:text-gray-900" aria-hidden="true"></i></a></div>
</div>
</div>
<!--/TODOS-->
</div>
</div>
<script src="" async defer></script>
</body>
<!--VuexStore-->
<script>
const store = new Vuex.Store({
state: {
message: "Welcome From VUEX",
count: 0
},
// Synchronous
mutations: {
increment(state, payload){
state.count+=payload
}
},
// Asynchronous
actions: {
increment(state, payload){
state.commit("increment", payload)
}
},
getters: {
get_message(state){
return state.message.toUpperCase() + " GETTER";
},
get_count(state){
return state.count;
}
},
});
</script>
<!--/VuexStore-->
<script>
const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const posts = "https://jsonplaceholder.typicode.com/posts"
const todos = "https://jsonplaceholder.typicode.com/todos"
const todo_post = "https://jsonplaceholder.typicode.com/posts"
new Vue({
el: "#app",
data () {
return {
welcome: "Hello World",
results: [],
posts: [],
todos: [],
records: [],
feedback: "",
name: ""
}
},
computed: {
filteredList() {
return this.posts.filter(item => {
return item.title
.toLowerCase()
.includes(this.name.toLowerCase());
});
},
//Message Directly from State
message(){
return store.state.message;
},
//Count Directly from State
count(){
return store.state.count;
},
//Message Using A Getter
get_message(){
return store.getters.get_message
},
//Count Using A Getter
get_count(){
return store.getters.get_count
}
},
methods: {
pressed(){
store.dispatch("increment", 10)
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
axios.get(posts).then(response => {
this.posts = response.data
})
axios.get(todos).then(response => {
this.todos = response.data
})
axios.post(todo_post,
{
"userId": 100,
"id": 2,
"title": "MyPost Title",
"body": "MyPost Body"
},
)
.then(function (response) {
this.feedback = response.data
})
.catch(function (error) {
this.feedback = error
});
//GET USING FETCH
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment