Gourav Kumar
2 years ago
commit
5cda3ad037
12 changed files with 5866 additions and 0 deletions
@ -0,0 +1,5 @@ |
|||||
|
node_modules |
||||
|
.DS_Store |
||||
|
dist |
||||
|
dist-ssr |
||||
|
*.local |
@ -0,0 +1,13 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<link rel="icon" href="/favicon.ico" /> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Vite App</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
<script type="module" src="/src/main.js"></script> |
||||
|
</body> |
||||
|
</html> |
File diff suppressed because it is too large
@ -0,0 +1,15 @@ |
|||||
|
{ |
||||
|
"name": "homepage", |
||||
|
"version": "0.0.0", |
||||
|
"scripts": { |
||||
|
"dev": "vite", |
||||
|
"build": "vite build" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"vue": "^3.0.4" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"vite": "^1.0.0-rc.13", |
||||
|
"@vue/compiler-sfc": "^3.0.4" |
||||
|
} |
||||
|
} |
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,15 @@ |
|||||
|
<template> |
||||
|
<img alt="Vue logo" src="./assets/logo.png" /> |
||||
|
<HelloWorld msg="Welcome to Gourav's Homepage" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import HelloWorld from './components/HelloWorld.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'App', |
||||
|
components: { |
||||
|
HelloWorld |
||||
|
} |
||||
|
} |
||||
|
</script> |
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,36 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<h2>Welcome to Gourav's Homepage</h2> |
||||
|
<input type="text" placeholder="Filter Search" v-model="query" /> |
||||
|
<button @click="reset">Reset</button> |
||||
|
</div> |
||||
|
<div> |
||||
|
{{ query }} |
||||
|
<search-results :query='query' /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { ref } from "vue"; |
||||
|
import SearchResults from './SearchResults.vue'; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
SearchResults, |
||||
|
}, |
||||
|
|
||||
|
setup() { |
||||
|
const query = ref(""); |
||||
|
|
||||
|
const reset = (evt) => { |
||||
|
query.value = ""; // clears the query |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
query, |
||||
|
reset, |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
@ -0,0 +1,33 @@ |
|||||
|
<template> |
||||
|
<div class="root"> |
||||
|
<p>Showing {{ filteredTitles.length }} results for "{{ query }}"</p> |
||||
|
<ul> |
||||
|
<p v-for="title in filteredTitles" :key="title.Page"> |
||||
|
<a :href="title.Page" target="_blank">{{ title.Name }}</a> |
||||
|
</p> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import titles from "../post-data.json"; |
||||
|
import { computed } from "vue"; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
query: String, |
||||
|
}, |
||||
|
|
||||
|
setup(props, context) { |
||||
|
const filteredTitles = computed(() => { |
||||
|
return titles.filter((s) => |
||||
|
s.Name.toLowerCase().includes(props.query.toLowerCase()) |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
filteredTitles, |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
@ -0,0 +1,8 @@ |
|||||
|
#app { |
||||
|
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
text-align: center; |
||||
|
color: #2c3e50; |
||||
|
margin-top: 60px; |
||||
|
} |
@ -0,0 +1,5 @@ |
|||||
|
import { createApp } from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import './index.css' |
||||
|
|
||||
|
createApp(App).mount('#app') |
@ -0,0 +1,210 @@ |
|||||
|
[ |
||||
|
{ |
||||
|
"Name": "Setting Up your First Vue3 Project - Vue 3.0 Release", |
||||
|
"Page": "https://learnvue.co/2020/09/setting-up-your-first-vue3-project-vue-3-0-release/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "A Vue Event Handling Cheatsheet – The Essentials", |
||||
|
"Page": "https://learnvue.co/2020/01/a-vue-event-handling-cheatsheet-the-essentials/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "6 Techniques to Write Better VueJS v-for Loops", |
||||
|
"Page": "https://learnvue.co/2020/02/6-techniques-to-write-better-vuejs-v-for-loops/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "A Simple Vue Watcher Tutorial For Beginners", |
||||
|
"Page": "https://learnvue.co/2019/12/a-simple-vue-watcher-tutorial-for-beginners/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "VueJS Animations for Beginners", |
||||
|
"Page": "https://learnvue.co/2020/02/vuejs-animations-for-beginners/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Provide and Inject - An Introduction to Building Vue3 Plugins", |
||||
|
"Page": "https://learnvue.co/2020/03/designing-vue3-plugins-using-provide-and-inject/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "How to Manage VueJS Mixins", |
||||
|
"Page": "https://learnvue.co/2019/12/how-to-manage-mixins-in-vuejs/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "How You Can Use Vue Transitions Right Now", |
||||
|
"Page": "https://learnvue.co/2020/01/how-you-can-use-vue-transitions-right-now/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Using Component Slots in VueJS — An Overview", |
||||
|
"Page": "https://learnvue.co/2019/12/using-component-slots-in-vuejs - an-overview/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "An Overview of VueJS Dynamic Components", |
||||
|
"Page": "https://learnvue.co/2020/01/an-overview-of-vuejs-dynamic-components/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Mastering Computed Properties in VueJS", |
||||
|
"Page": "https://learnvue.co/2019/12/mastering-computed-properties-in-vuejs/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "A First Look at Vue-Router in Vue3", |
||||
|
"Page": "https://learnvue.co/2020/04/a-first-look-at-vue-router-in-vue3/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "A Beginner's Guide to Vue Lifecycle Hooks", |
||||
|
"Page": "https://learnvue.co/2019/12/a-beginners-guide-to-vuejs-lifecycle-hooks/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "How to Use Lifecycle Hooks in Vue3", |
||||
|
"Page": "https://learnvue.co/2020/03/how-to-use-lifecycle-hooks-in-vue3/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "How to Add Drag and Drop to Your VueJS Project", |
||||
|
"Page": "https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "How to Make Your First VueJS Plugin", |
||||
|
"Page": "https://learnvue.co/2020/01/how-to-make-your-first-vuejs-plugin/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "An Introduction to Vue3 Props - A Beginner's Guide", |
||||
|
"Page": "https://learnvue.co/2020/08/an-introduction-to-vue3-props-a-beginners-guide/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Building Reusable Components in VueJS | Tabs", |
||||
|
"Page": "https://learnvue.co/2019/12/building-reusable-components-in-vuejs-tabs/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Creating a Vue3 Global Component", |
||||
|
"Page": "https://learnvue.co/2020/08/how-to-register-a-vue3-global-component/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "12 VueJS Best Practices for Pro Developers", |
||||
|
"Page": "https://learnvue.co/2020/01/12-vuejs-best-practices-for-pro-developers/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "An Overview of Vue Keep-Alive", |
||||
|
"Page": "https://learnvue.co/2019/12/an-overview-of-vue-keep-alive/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "A Beautiful Parallax Scrolling Effect in VueJS - Daily Vue Tips #2", |
||||
|
"Page": "https://learnvue.co/2020/04/a-beautiful-parallax-scrolling-effect-in-vuejs-daily-vue-tips-2/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Getting Smart with Vue Form Validation – Vuelidate Tutorial", |
||||
|
"Page": "https://learnvue.co/2020/01/getting-smart-with-vue-form-validation-vuelidate-tutorial/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Build a Custom VueJS Tag Input in Under 10 Minutes", |
||||
|
"Page": "https://learnvue.co/2020/01/build-a-custom-vuejs-tag-input-in-under-10-minutes/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "LearnVue", |
||||
|
"Page": "https://learnvue.co/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Building the Same Component in Vue2 vs. Vue3", |
||||
|
"Page": "https://learnvue.co/2020/02/building-the-same-component-in-vue2-vs-vue3/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "4 Vue3 Composition API Tips You Should Know", |
||||
|
"Page": "https://learnvue.co/2020/01/4-vue3-composition-api-tips-you-should-know/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "8 Free Vue Icon Libraries to Pretty Up Your Web App", |
||||
|
"Page": "https://learnvue.co/2019/12/8-free-vue-icon-libraries-to-pretty-up-your-web-app/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "How and Why to Use Wrapper Components in Vue3", |
||||
|
"Page": "https://learnvue.co/2020/02/how-and-why-to-use-wrapper-components-in-vue3/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Animated Active Menu Highlights in VueJS - Daily Vue Tips #1", |
||||
|
"Page": "https://learnvue.co/2020/04/animated-active-menu-highlights-in-vuejs-daily-vue-tips-1/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Extract and Reuse Logic in the Vue Composition API", |
||||
|
"Page": "https://learnvue.co/2020/03/extract-and-reuse-logic-in-the-vue-composition-api/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "7 Simple VueJS Tips You Can Use to Become a Better Developer", |
||||
|
"Page": "https://learnvue.co/2020/01/7-simple-vuejs-tips-you-can-use-to-become-a-better-developer/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "What You Need to Know About Vue3 in 2020", |
||||
|
"Page": "https://learnvue.co/2019/12/what-you-need-to-know-about-vue3-in-2020/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "An Introduction to VueJS Suspense Components", |
||||
|
"Page": "https://learnvue.co/2020/01/an-introduction-to-vuejs-suspense-components/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Creating Your First VueJS Custom Directive", |
||||
|
"Page": "https://learnvue.co/2020/01/creating-your-first-vuejs-custom-directive/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "A Quick Vue3 Infinite Scrolling Component - Daily Vue Tips #4", |
||||
|
"Page": "https://learnvue.co/2020/09/a-quick-vue3-infinite-scrolling-component-daily-vue-tips-4/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "An Introduction to Vue Teleport - A New Feature in Vue3", |
||||
|
"Page": "https://learnvue.co/2020/09/an-introduction-to-vue-teleport-a-new-feature-in-vue3/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "7 Great Vue3 Tutorials and Resources to Start Learning Today", |
||||
|
"Page": "https://learnvue.co/2020/03/7-great-vue3-tutorials-and-resources-to-start-learning-today/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "How to Use VueJS Filters to Write Better Code", |
||||
|
"Page": "https://learnvue.co/2020/01/how-to-use-vuejs-filters-to-write-better-code/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Using Vue watchEffect to Track Reactive Dependencies", |
||||
|
"Page": "https://learnvue.co/2020/03/using-vue-watcheffect-to-track-reactive-dependencies/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "How To Deploy Your Vue App to Github Pages", |
||||
|
"Page": "https://learnvue.co/2020/09/how-to-deploy-your-vue-app-to-github-pages/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "6 Vue Loader Animation Libraries to Reduce Your Bounce Rate", |
||||
|
"Page": "https://learnvue.co/2020/02/6-vue-loader-animation-libraries-to-reduce-your-bounce-rate/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "9 Vue Input Libraries to Upgrade Your Forms", |
||||
|
"Page": "https://learnvue.co/2020/01/9-vue-input-libraries-to-power-up-your-forms/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "A VueJS Skeleton Loading Screen using Suspense Components", |
||||
|
"Page": "https://learnvue.co/2020/04/vue-skeleton-loading-screen-using-suspense-components-daily-vue-4/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Building a VueJS DatePicker Component - A Complete Tutorial", |
||||
|
"Page": "https://learnvue.co/2020/03/building-a-vuejs-datepicker-component-a-vue3-tutorial/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "What does VueJS 3.0 Mean for Web Development", |
||||
|
"Page": "https://learnvue.co/2019/12/what-does-vuejs-3-0-mean-for-web-development/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Build Your First Vue3 Application - Our First Course", |
||||
|
"Page": "https://learnvue.co/2020/03/build-your-first-vue3-application-our-vue3-course/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "Make Elements Fade In While Scrolling - Daily Vue Tip 3", |
||||
|
"Page": "https://learnvue.co/2020/04/make-elements-fade-in-while-scrolling-daily-vue-tip-3/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "How Vue3 is Designed for Both Hobby Devs and Large Projects", |
||||
|
"Page": "https://learnvue.co/2019/12/how-vue3-is-designed-for-both-hobby-devs-and-large-projects/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "A First Look at Vue3 Alpha Release - Example App in 15 Minutes", |
||||
|
"Page": "https://learnvue.co/2020/01/a-first-look-at-vue3-alpha-release-example-app-in-15-minutes/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "A First Look at Vue3 Composition API", |
||||
|
"Page": "https://learnvue.co/2019/12/a-first-look-at-vue3-a-vue-composition-api-tutorial/" |
||||
|
}, |
||||
|
{ |
||||
|
"Name": "5 Things You can Do to Prepare for Vue 3.0", |
||||
|
"Page": "https://learnvue.co/2019/12/5-things-you-can-do-to-prepare-for-vue-3-0/" |
||||
|
} |
||||
|
] |
Loading…
Reference in new issue