Vue Js Examples

Posted on  by admin
  • 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 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.
  • vue-demo-todolist(opens new window) a simply vue2.0 demo built with Vue 2.0, vue-cli. by fishenal(opens new window)
  • vue-AdminLte(opens new window) by liujians(opens new window)
  • Vue(2.0) + Node.js: A blog content manage system (CMS)(opens new window) by @ycwalker
  • ngexplorer-quasar(opens new window) - Implementation of Ngexplorer with quasar framework(opens new window)
  • zhihu-daily-vue(opens new window) a zhihu daily base on vue2.0 by moonou(opens new window)
  • loopback-vue(opens new window) loopback+vue+vue-resource,ionic-app,vue page分页功能,authenticate 权限控制,accesstoken机制,credentials,CI,docker qxl1231(opens new window)
  • vue-s3-dropzone(opens new window) A Vue.js drag-and-drop component uploads files to AWS S3 serverlessly
  • easy-vue(opens new window) a easy example using the vue to implement easy web with vue 2.0, vuex 2.0, vue-router 2.0, vue-infinite-scroll 2.0, vue-progressbar 2.0 by TIGERB(opens new window)
  • Vuex Events Messaging Demo(opens new window) by Metric Loop(opens new window)
  • vue-memo(opens new window) a simple demo build with Vue.js(>2.x.), vue-router(>2.x.), vuex(>2.x.), [email protected](>3.x.) and Firebase(>3.6.x) by akifo(opens new window)
  • Resume Vue(opens new window) JSON based Resume based on Vue 2.0 by ChangJoo Park(opens new window)
  • App example with JWT Authentication(opens new window) developed with Phoenix Framework, Vue and Vue Router (demo(opens new window))
  • Sample CRUD app with router in Vue 2.0(opens new window) by @shershen08(opens new window)
  • ASP.NET Core Vue.js server-side rendering sample(opens new window) by @mgyongyosi(opens new window)
  • vuefire-quickstart(opens new window) - Documented Firebase integration w/ webpack and eslint, by @sejr(opens new window).
  • Real Time Social News App(opens new window) developed with Phoenix Framework, Vue, Vue Router and Vuex (demo(opens new window))
  • vue-calculator(opens new window) a simply calculator built with Vue 2.0, vue-cli(webpack-simple)
  • Wikipedia-viewer(opens new window) A simple wikipedia-viewer page built with vue2.x ,vue-router,vue-cli(webpack-simple) and ajax(jsonp)
  • vue2.x-douban(opens new window) A simple of douban movie build with vue2.x,vue-router and axios(豆瓣电影). by Superman(opens new window)
  • vue-laravel-example(opens new window) Vue - Laravel - Example is a simple example to set Vue with Laravel. by Jiajian Chan(opens new window)
  • vue-foundation(opens new window) A demo app integrating VueJS with Zurb Foundation(opens new window), built using the webpack vue-cli f
  • aspnetcore-Vue-starter(opens new window) A VueJS 2 starter template as part of an asp.net MVC dotnetcore project. This template includes the VueJS client app and a backend API controller.
  • vue-reddit-app(opens new window) A Reddit SPA demo(opens new window) built with Vue 2.X , Vue Router 2 , Vuex and axios. Using Muse-UI and vue-cli webpack template by @yujiahaol68(opens new window)
  • vue-music-qq(opens new window) A qq-music project is based on vue-cli. The pages are simple and smooth
  • NavigationTab with Vue-Redux and Plain VueJSX(opens new window) Navigation Tab with both plain Vue JSX and Vue + Redux Binding
  • Veggie Map(opens new window) An interactive demo using Vuejs + Vue router + Leaflet and Firebase
  • vuejs-d3(opens new window) examples how to use d3 for visualisations.
  • vue-twitter-client(opens new window) A Twitter Client App build with Vue 2.X, Vuex, electron-vue and Electron
  • Douban(opens new window) Awesome douban Example created with Vue2.x + Vuex + Vue-router + vue-resource. by jeneser(opens new window)
  • Storyblok vuejs-boilerplate(opens new window) - Integrates Storyblok's Component System, allows to create editable Websites.
  • Vuexpresso(opens new window) - A boilerplate using VueX, Vue-Router, Vue-Apollo, webpack, GraphQL, Apollo-client, express and mongo
  • Vue.js with Sails.js example project(opens new window) - This project is for those who are new to single-page applications and want to learn through a real example.
  • Vue.js & Pyramid web framework app(opens new window) - A boilerplate using Pylons Pyramid webframework backend Vuejs webpack2, vue-router, yarn(packet manager)
  • vue-feathers-chat(opens new window) A sample realtime chat made with Vue in frontend and Feathers in backend, but using just Socket.IO-Client for the communication
  • vue-xplan(opens new window) A rotating earth demo page created with Vue and three.js
  • vueSocketChatRoom(opens new window) A socket chat room using vue2.x,vuex2.x,vue-router2.x,vux2.x,socket.io
  • vue-tetris (Use Vue, Vuex, Immutable to code Tetris)(opens new window) by @Binaryify(opens new window): Use Vue, Vuex, Immutable to code Tetris.
  • route-planner-vue(opens new window) by @Kasheftin(opens new window): The tool for planning routes with multiple sortable layers, draggable directions, markers and shapes on google map.
  • MyDiary-Vue(opens new window) A diary application build with Vue 2.X which is also have contact and todolist function
  • VueJS Example Projects(opens new window) on Github
  • todo-mvc-webpack(opens new window) by voluntapear(opens new window) TodoMVC implementation on Vue 2 using the webpack-basic template with examples showing vuex, vue-router, central event bus and VueFire.
  • Chess Storybook Example(opens new window) with Vue 2.0
  • Vue Weather Notifier(opens new window) A small sample animation app with SVG and Vuex
  • VueBlog(opens new window) A blog system supporting service side rendering by wmui(opens new window)
  • Cinemateka(opens new window) - An example of SPA made with Vue v1 & Laravel 5. Film & events schedule. Russian comments.
  • vue-2.x-boilerplate(opens new window) - A simple and small starter kit for a Vue project Vuex + vue-router
  • vue-minesweeper(opens new window) - A deadly simple minesweeper game with vuejs by rhapsodyn(opens new window)
  • X-Flowchart-Vue(opens new window) - A flowchart editor with SVG and Vue
  • koa-vue-notes-web(opens new window) - A fleshed-out SPA using Koa 2.3 on the backend and Vue 2.4 on the frontend. Includes fully featured user-authentication components, CRUD actions for the user's notes, and Vuex store modules.
  • Vuejs Shopping Cart(opens new window) - Shopping cart example using Vuejs and Firebase
  • PokedexVueJs(opens new window) by @rchung95
  • vuefire-auth(opens new window) A Vuefire Vue2-Auth-Email Verification with Firebase
  • vuefire-realtimedatabase(opens new window) A Vuefire Vue2-RealtimeDatabaseCRUD with Firebase
  • vuefire-storage(opens new window) A Vuefire Vue2-Storage with Firebase
  • Vue2-PWA-Blog(opens new window) by @deepak-singh
  • vue-firebase-auth-vuex(opens new window) A Vue2 Firebase Authentication with Vuex and support Progressive Web Apps
  • vue-chart-stater-kit(opens new window) Quick starter using Vue Router, Vue Chart, Element-UI
  • vue2.0-demos(opens new window) using mint-ui, Element-UI,And have Some demos(select city and so on)
  • conway(opens new window) Conway's Game of Life in Vue.
  • vuex-feature-scoped-structure(opens new window) An example application of the feature scoped vuex application structure
  • vuex-examples(opens new window) - Simple Examples on using Vuex to build Real World Apps
  • vue-vuex-todomvc(opens new window) - Example TodoMVC Vue.js app with Vuex store and server backend via REST and full set of E2E tests using Cypress.io(opens new window) test runner.
  • vuejs-sqljs-boilerplate(opens new window) - This is a boilerplate to use both Vue.js and sql.js together
  • X-WebDesktop-Vue(opens new window) - The WebDesktop system based on Vue
  • vuejs-music-player(opens new window) - A Vue.js lite music player
  • Vue.js Best Practices Example Project(opens new window) - A best practices example project using Vue.js + Vue Router + Vuex + Vuelidate
  • Vue.js [ONE] client(opens new window) - [ONE] client written with Vue2.5
  • 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.