Vue Js Example

Posted on  by admin
  • Vue.js is one of the most popular javascript frameworks along with React.js and Angular.
  • It designed to be incrementally adoptable and focused on the view layer only.
  • It has very well documentation and video courses by Vuemastery and Vueschool to help you learn the fundamental of Vue.js.
  • However, learning from documentation and tutorial is not enough.
  • You should also learn from Vue.js example projects to know how people use it and best practices for some cases.
  • Taking a look at the example projects will also encourage you to practice what you have learned from the tutorial.
  • In this post, I will share the list of Vue.js example projects that I compiled from Github.
  • I sorted them from beginner to intermediate level. Before you choose an example project, Here are some tips when learn from example projects.
  • With so many open-source projects available on Github, we often feel overwhelmed with them. But, when you really want to learn from those projects, never do that by learning them at once.
  • Human brains aren’t designed to multi-task. You should filter them, and choose only one project that you really want to learn. After you finished it, then you can choose the next project.
  • With an example project, you might think that you will learn it only by reading the codes.
  • You should rewrite it on your own, and don’t just copy-pasting it.
  • It may sound trivial, but trust me you will find out more as you rewrite the codes.
  • In the rewriting process, you will find some codes that aren’t familiar with you.
  • When this happened, be curious to find why those codes work. Because it will likely to increase your knowledge.
  • After you find some unfamiliar codes, do some experiment with them. Modify them, see if it still works or not, and again, find out why.
  • You should also add your own codes as you learn more. Combine it with the base codes. It can be styling or adding more features. With enough modification, you can make it as your portfolio, of course by mentioning the example project you use. Last but not least, have patience while you learn.
  • Don’t rush, and stay focused. It will takes time, but it worth it. Now, you can choose one of the following projects to learn.
  • I sort them from the easiest to moderate level. Remember, only pick one project to learn at a time! vue3-composition-api-todo-app (this link opens in a new window) by BurakGur (this link opens in a new window).
  • Basic ToDo App with Vue 3 Composition API. 1 Watcher 6 Stars 4 Forks . todo-vue (this link opens in a new window) by drehimself (this link opens in a new window).
  • Code for YouTube series on building a Todo App in Vue.js. 14 Watchers 198 Stars 119 Forks .
  • vue-calculator (this link opens in a new window) by codyseibert (this link opens in a new window).
  • 4 Watchers 44 Stars 49 Forks . vue-vuex-registration-login-example (this link opens in a new window) by cornflourblue (this link opens in a new window).
  • Vue + Vuex – User Registration and Login Tutorial & Example. 11 Watchers 301 Stars 185 Forks . vuejs-by-sample (this link opens in a new window) by Lemoncode (this link opens in a new window).
  • The goal of this project is to provide a set of step by step samples, covering core concepts of Vue.js.
  • 8 Watchers 60 Stars 33 Forks . vue-hackernews (this link opens in a new window) by vuejs (this link opens in a new window). HackerNews clone with Vue.js.
  • 103 Watchers 2502 Stars 540 Forks . vuejs-example-stock-trader (this link opens in a new window) by sarneeh (this link opens in a new window).
  • Vue.js + Vue Router + Vuex in a simple Stock Trading game. 3 Watchers 35 Stars 14 Forks . vue-trello (this link opens in a new window) by zackthoutt (this link opens in a new window).
  • A Trello clone built with VueJS. 10 Watchers 156 Stars 43 Forks .
  • vue-chat (this link opens in a new window) by Coffcer (this link opens in a new window). chat example by vue.js + vuex + webpack. 78 Watchers 1583 Stars 486 Forks .
  • gmail-clone (this link opens in a new window) by josuemartinezz (this link opens in a new window).
  • Beautiful gmail redesign created with vue and tailwindcss 🎈. 2 Watchers 21 Stars 5 Forks . gkeep-vueifire (this link opens in a new window) by Swimburger (this link opens in a new window).
  • Google Keep clone with Vue and Firebase. 8 Watchers 153 Stars 52 Forks .
  • vuejs-slack-clone-realtime (this link opens in a new window) by ittus (this link opens in a new window).
  • Slack clone using VueJS and firebase. 1 Watcher 34 Stars 12 Forks . vue-quasar-admin-example (this link opens in a new window) by odranoelBR (this link opens in a new window).
  • Example of quasar admin. 53 Watchers 478 Stars 168 Forks . vue-admin-template (this link opens in a new window) by fatihunlu (this link opens in a new window).
  • Sample Admin Template based on Vuejs & Vuetify. 9 Watchers 173 Stars 63 Forks .
  • Vueflix (this link opens in a new window) by ricardovasconcelos (this link opens in a new window). A simple Netflix clone built with Vuejs.
  • 6 Watchers 57 Stars 9 Forks . revue (this link opens in a new window) by Lanseuo (this link opens in a new window).
  • A reddit clone built with Vue.js and Flask. 3 Watchers 24 Stars 5 Forks . vue-realworld-example-app (this link opens in a new window) by gothinkster (this link opens in a new window).
  • An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.
  • 77 Watchers 3482 Stars 1049 Forks . Vue-mmPlayer (this link opens in a new window) by maomao1996 (this link opens in a new window). 🎵 基于 Vue 的在线音乐播放器(PC) Online music player.
  • 43 Watchers 1398 Stars 420 Forks . vue-hackernews-2.0 (this link opens in a new window) by vuejs (this link opens in a new window). HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering.
  • 329 Watchers 10703 Stars 2198 Forks . vue-nodejs-youtube-clone (this link opens in a new window) by techreagan (this link opens in a new window).
  • This is the frontend (VueJS) of the Youtube clone called VueTube. 14 Watchers 311 Stars 89 Forks .
  • jira_clone (this link opens in a new window) by Datlyfe (this link opens in a new window).
  • A Jira clone built with Vuejs & Nodejs/Graphql. 27 Watchers 653 Stars 101 Forks .
  • If you know other Github repositories that worth mentioning here, don’t hesitate to share them in the comment section.
  • The repository should be:. A Vue example project. Has a demo page, or at least some screenshot. Work with no significant console error.
  • Vue JS is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue JS is designed from the ground up to be incrementally adoptable.
  • The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing dev.
  • – (https://vuejs.org/v2/guide/). Vue outperforms Angular and React JS on pretty much all benchmarks, and it’s much simpler to pick up.
  • It’s a “progressive” framework. At the lowest-level, you can simply link to it in your front-end like jQuery, and start using lots of cool features that solve most simple javascript/jQuery needs.
  • Then, if you want to build that into a big single-page app, you have built-in support for component-style development and React-style rendering if you, PLUS officially maintained supporting frameworks (Vuex and Vue Router).
  • Vue has “single-file component” files which allow you to build your HTML template, your JS code and your component-specific CSS in a single file that Vue and Webpack will process appropriately–this is actually very cool.
  • – (https://forum.freecodecamp.com/t/vue-js-resources/48285/4). If you are a fan of VueJS framework or you are just looking for inspiration, then you should check out these cool Vuejs examples and templates!
  • Vue JS Picture Input. Vue Material Dashboard Laravel by Creative Tim. Vuetify Material Dashboard by Creative Tim . Vuetify Material Dashboard PRO by Creative Tim .
  • Onsen UI for Vue 2. VueJS Expo is a beautiful showcase of websites, applications, and experiments using the Vue.js framework. Quasar Framework. Vue JS Starter Template.
  • Vue.js 2.0 UI elements for mobile. What do you think about these Vuejs examples and templates, are these helpful?
  • If you think something is missing from this list, let us know in a comment below.
  • VueJS Useful Resources. Selected Reading. Explanation − In the above example, we have created a currency converter that converts one value of currency to the selected value of other currency.
  • We have created two dropdowns of currency. When we enter the amount to convert in the textbox, the same is displayed below after conversion.
  • We are using the computed property to do the necessary calculation for currency conversion.
  • Explanation − In the above example, we have three texboxes to enter - the First Name, Last Name and Address.
  • There is an add button, which adds the values entered in the textboxes in a table format with a delete button.
  • The table format is created using components. The click button interacts with the parent component using the emit event to delete the elemet from the array.
  • The values entered are stored in the array and the same are shared with the child component using the prop property.
  • Vue.js components are used for abstraction, which allows building large scale applications composing of small and reusable components.
  • Components in Vue.js helps to extend basic HTML elements to encapsulate reusable code. In some cases, components may also appear as native HTML elements extended with the ‘is’ attribute.
  • Covering all the keywords, Vue Component is a reusable, self-contained piece of UI logic; hence Vue.js is also called as ‘Component Framework’.
  • It is a structured way of front-end development that will not spoil the UI development experience and look and feel to end-users.
  • First, we need to create a component constructor. For using the above-created constructor as a component, we need to globally register the component with the tag sample_component.
  • With out created constructor, the above line will look as below:. Once the constructor is registered as a component, the ‘sample_component’ can now be used in parent instance’s as a custom element.
  • These components should be registered before the instantiation of root Vue.
  • Different examples are mentioned below:.
  • Node JS Training Program (3 Courses, 7 Projects)3 Online Courses | 7 Hands-on Projects | 25+ Hours | Verifiable Certificate of Completion | Lifetime Access 4.5 (8,154 ratings).
  • Related Courses. Vue JS Training (1 Courses, 3 Project)JavaScript Training Program (39 Courses, 23 Projects, 4 Quizzes).
  • Reusing a Component. Complex Grid Component in Vue.js. We can filter employee names:.
  • With all the examples above, let us see on the building blocks on components.
  • ‘el’ used in root components initialized using new Vue( {} ), which identifies DOM element component will mount on.
  • ‘props’, will list down all the properties that can be passed down to the child component.
  • ‘template’, used to set up a component template which defines the output generated by the component. The component also accepts some other properties like ‘data’, local state of the component, ‘method’, ‘computed’, properties associated with the component, and ‘watch’.
  • With this, we shall conclude our topic ‘Vue.js components’. We have seen what is Vue.js components and have illustrated some of the examples to let you understand better.
  • Syntax of how to create and register constructor as a Vue component is also shown here.
  • Finally, we have seen what are the building blocks which help us in building the Vue components.
  • This is a guide to Vue.js components. Here we discuss the introduction to Vue.js components along with examples, respectively.
  • You may also have a look at the following articles to learn more –.
  • Vue.js 2.5 with vue-cli v3 including authentication with auth0(opens new window) by Dominik Angerer, Storyblok
  • Skeleton Vue+TypeScript(opens new window) - TypeScript, VueJS, ElementUI, Vue Router, Vuex, Material Icons, BrowserSync, Dockerfile
  • PENV Starter(opens new window) - A basic example of how to use VueJS, Express and PostgreSQL in conjunction
  • vue-relay-examples(opens new window) - A collection of example applications using vue-relay.
  • laravel-vue-boilerplate(opens new window) - A Laravel 5.5 SPA boilerplate with a users CRUD using Vue.js 2.5, Bootstrap 4, TypeScript, Sass, Pug and Jest.
  • Vue Design System(opens new window) - An open source boilerplate for building UI Design Systems with Vue.js.
  • Vue Bulma Demo(opens new window) - A simple demo website to check out Bulma / Vue JS & express in conjunction.
  • vue.js与laravel结合的前后端分离开发模板(opens new window)- A template website to laravel passport / Vue.JS & Element UI.
  • Hands-On Web Development with Vue.js(opens new window) by Roman Kuba, Packt. (May 2018)
  • Vue Online Shopping Mall(opens new window) - A online shopping mall SPA demo, 基于VUE开发的前后端分离电子商城前端项目
  • FUE(opens new window) - Admin SPA client and server-side boilerplate with Vue.js + Vue Router + Vuex + Vuetify + FeathersJS
  • Vue + TypeScript Cookbook(opens new window) - A small cookbook covering some less-than-obvious solutions for people getting started with Vue + TypeScript
  • ASP.NET Core Vue Starter CLI 3.0(opens new window) A Vue starter template using Vue CLI 3.0 with custom configuration (default TypeScript, Vue, Router, Vuex, Vuetify) integrated with ASP.​NET Core by @SoftwareAteliers(opens new window) (September 2018)
  • vue-soundcloud(opens new window) A Soundcloud client built with Vue.js 2, by Soroush Chehresa(opens new window)
  • vue-cart(opens new window) - A simple shop cart made with vue, vuex and vue router. by crisgon(opens new window)
  • Nuxt + Apollo + Element(opens new window) A Vue.js SSR boilerplate with Nuxt, Element (custom theme) and Vue Apollo.
  • vue-daily-zhihu(opens new window) a simple demo build with Vue 2.0 & vue-router & vuex by walleeeee(opens new window)
  • Multi-page ASP.NET Core Vue with TypeScript(opens new window) - Multi-page ASP.NET Core Vue, Typescript, Vuex, Vue router, Bulma, Sass and Jest application. Template/starting point on how to use Vue.js as a multi page(multiple mini spa's) application in .NET Core MVC.
  • CION - Design system boilerplate for Vue.js(opens new window) - A design system build primarily for Vue.js applications. It utilizes design tokens, a living styleguide with integrated code playgrounds and reusable components for common UI tasks.
  • Vue websockets example(opens new window) - A basic example of Websockets usage with Vue.js 2 + Node project for full working example.
  • Vue(2.0) + Node.js: A blog(opens new window) by @FatDong1
  • vue-todo-list(opens new window) ToDo List sample app based on Vue + Vuex + Vuetify + Vee-Validate
  • Vue.js and Ionic v4 examples(opens new window) - A set of examples of how to use Ionic v4 with Vue.js
  • Personal Website that use Vue, Vuex and Vue-Router(opens new window) - A simple website example that made with vue, vuex and vue-router by Muratcan Şentürk(opens new window)
  • Client-Side Vue.js(opens new window) - Demo(opens new window) - Vue.js client-side for tiny, quick-loading, Node.js-less Single Page Apps by Justin Wash(opens new window)
  • Large scale Vue.js application boilerplate + Vuex(opens new window) - A boilerplate for starting large scale, flexible Vue.js application with using Vuex as state management - by Arun Redhu(opens new window)
  • Vue webpack typescript(opens new window) - Boilerplate with sass/ts/sfc linters. Full typesafety including vuex and nice looking vue component with vuex-module-decorators, vue-property-decorator
  • Laravel + Nuxt.js boilerplate(opens new window) - by @acidjazz(opens new window)
  • TO(opens new window) - A social media app that allows you post just texts
  • All-About-Me(opens new window) - A Social Media Web App built with Vue, Firebase (Firestore/Auth/Storage), Element-UI, Disqus, Vuex, Vue-Router, and Sass. Supports image uploading, profile editing, add/remove friends, and comments.
  • Vue Voyagers Space Travel(opens new window) - A Vue.js Gamified example SPA that consumes a REST API. It presents infographics via D3.js, animation, and web audio
  • TodoMVC Vue 3 Composition API(opens new window) - A complete TodoMVC implementation in Vue 3 Composition API with components, store, unit e2e tests and linting
  • TodoMVC Vue(opens new window) - A complete TodoMVC implementation in Vue 2 with components, store, unit e2e tests and linting
  • Movie search app with Composition API(opens new window) - A movie search app implemented in Vue 2 with the Composition API plugin
  • Nuxt with JWT authentication via OTP(opens new window) - A Nuxt.js boilerplate with basic register and OTP-enabled login functions
  • vuetify-i18n-boilerplate(opens new window) - Demo(opens new window) - A boilerplate to quickly start a Vue project using Vuetify, Vue-i18n, Vuex and Vue-router
  • Google Keep Clone with Vue + Firestore(opens new window) - Google Keep clone with Vue and Firestore written in TypeScript
  • Go-echo-vuejs-boilerplate(opens new window) - Boilerplate that uses go with echo framework as a backend and vuejs that serve the web traffic
  • Vue-Next-TicTacToe(opens new window) - Simple Tic Tac Toe Game made with Vue Next
  • Vue 3 example without Webpack(opens new window) - An example of how to build a Vue app with Vue-Router without the need for Webpack or any other build tool. Includes the ability to prerender components and pages with Vue Server Renderer
  • COVID19 Live Data Component(opens new window) - Simple component that shows live COVID-19 data across the world
  • vue-stack-cesium(opens new window) - A minimal sample configuration project with CesiumJS(opens new window) and all the awesome Vue features. The project contains many examples how to combine and use certain packages to get started
  • Shopify Theme Lab(opens new window) - Shopify theme development starter using Vue, Vuex and Tailwind CSS
  • Peer to Peer game of telephone(opens new window) - A party game for 4 to 8 players (ideally!) where you mutate a phrase through drawings and captions, to make up funny scenarios with your friends. The project is an example of how to build a peer-to-peer game with Vue
  • vue3-webpack(opens new window) - Vue 3 + Webpack 4 starter
  • laravel-vue-3-starter(opens new window) - A pre-configured project using Laravel 8 and Vue 3
  • Vuetify Swipeout(opens new window) - A swipe out example built with Vue 2 + Vuetify + Swiper
  • Vuetify Todo PWA(opens new window) - A simple Todo PWA built with Vue 2 + Vuex + Vuetify
  • Vue Todo PWA(opens new window) - A simple Todo PWA built with Vue 3 + Vuex + Bootstrap 5
  • Vue simulating(opens new window) - A website simulating Linux system's GUI, using theme of Deepin distro. Using Vue + Tailwind CSS + Animate.css
  • Vue Word Game(opens new window) - A simple Hangman-like word guessing game, built with Vue 2
  • Coinchartsvue(opens new window) - Coinchartsvue is a cryptocurrency price chart based off Coinbase's original price chart
  • Vue 3 Shopping Cart(opens new window) - A Shopping cart example using Vue 3, Vite, daisyUI(opens new window) and Pinia(opens new window)
  • Lipku(opens new window) - Vue.js charts and other libraries
  • vuemoji-picker(opens new window) - Vue 2 and 3 lightweight emoji picker
  • Maxim Web Chat(opens new window) - A chat demo using MaximTop(opens new window)'s IM SDK (floo), 使用美信拓扑 IM SDK 实现的聊天App 示例
  • vue-cli-3-tailwind-axios-starter(opens new window) - A boilerplate using Tailwind, Axios-ready, Vuex and Router
  • vue-cli-3-wave-ui-starter(opens new window) - A boilerplate using Wave UI + Vuex and Router
  • CVue-Awesome(opens new window) - Auto resume builder by Emre Coşkunçay(opens new window)
  • Vue 3 TypeScript Library Template(opens new window) - A simple but complete library template for Vue 3, supports generating .vue.d.ts
  • Customizable Vue video chat app(opens new window) - A Vue video call demo app featuring local device controls and screen sharing
  • Vue3-Starter(opens new window) - A boilerplate with an opinion on how to structure your files/folders with a few examples such as Vue Router navigation guards, theming with Tailwind CSS, form validation w/ Vuelidate, localization with Fluent, etc.