Vue Website Example

Posted on  by admin
  • Vue is a progressive framework for building web interfaces and single-page apps.
  • It is becoming more and more popular among developers, and thanks to its flexibility and moderately smooth learning curve this framework is currently used on over 650K websites, and by big companies like Apple, Netflix, and Google.​Here is a list of 20 awesome website and landing pages you probably have heard about, but might not know were created using Vue.js.​Before we jump into the list, I used SaaS Landing Page to find high-quality Vue.js examples, and Wappalyzer (an amazing free-based tool) to identify the technologies behind the products.
  • Discover the best landing page examples created by top-class SaaS companies, and get ideas and inspiration for your next design project.
  • Reveal the technology stack of any website, instantly and for free.
  • 20 Awesome Vue.js website examples:. Spendesk is an all-in-one corporate expense and spend management service.
  • It lets you track expenses across your company, empower your employees with a clear approval process, and simplify your bookkeeping.
  • Moderne provides highly tailored ad ideas and insights, offering a digital workspace for more effective brainstorming for creative minds.
  • Chargebee is the leading subscription billing software powering end-to-end recurring billing, subscription management & auto invoicing for 2000+ SaaS businesses.
  • Yousign is a certified software solution for generating verifiable electronic signatures. The application is the leader in its class in France and already has a considerable customer base with more than 1500 customers.
  • Infermedica is a leading digital health company specialized in AI-powered solutions for preliminary diagnosis and patient triage. Keap (formerly Infusionsoft) offers an e-mail marketing and sales platform for small businesses, including products to manage and optimise the customer lifecycle, customer relationship management, marketing automation, lead capture, and e-commerce.
  • Beau allows you to easily pull in data from different sources, discover patterns, uncover trends and share insights with your team to keep your business moving forward.
  • Laravel Vapor is an auto-scaling, serverless deployment platform for Laravel, powered by AWS Lambda.
  • Manage your Laravel infrastructure on Vapor and fall in love with the scalability and simplicity of serverless.
  • MetaMusic outlines the procedure and best practices to follow and establishes a common metadata model for indexing any music content.
  • Specify is a tool to create, scale and maintain a design system. Meet the ultimate bridge for digital product teams.
  • ProtoPie is the easiest tool used to turn your UI/UX design ideas into highly interactive prototypes for mobile, desktop, web, all the way to IoT.
  • Chargetrip is accelerating the advent of sustainable transportation by developing the missing tools that help people and businesses switch to electric mobility. Brilliant helps you build quantitative skills in math, science, and computer science with fun and challenging interactive explorations.
  • The Mille et UN Fund for Young People is the first major government project that brings together crowdfunding, contributions from businesses, and support from the public sector.
  • Netlify is a unified platform that automates code to create performant, easily maintainable sites and web apps. ITG.Digital is a website that offers more than 1,500 vector illustrations and 1,000,000 unique combinations for web applications, presentations, social media, print, and more.
  • Icons8 app allows to recolor icons in seconds, add overlays, create icon fonts, drag-n-drop icons to any software, and more.
  • Inspireframe lets anyone easily create website prototypes with thousands of real website components.
  • No design skills needed! Aircall is a cloud-based call center software that integrates with CRM, productivity, and helpdesk tools.
  • Kontainer is a marketing platform for secure & professional organization & sharing of your images, video, logos and other files both internally and externally.
  • I hope you enjoyed this list Vue.js examples and inspiration. If you’re aware of more rad websites built using Vue.js please feel free to share them below.
  • JavaScript is known to minimize the server validation for the data and boost up the performance of the website in terms of loading speed and request-response ratio.
  • With the various frameworks and libraries like Angular, React and Vue, it’s easy to develop highly complex and scalable web application using it and with the high-end security features on the backend using Node JS and various DB providers to manage a large amount of data.
  • If we talk about Vue.JS, the initial release was launched in February 2014 but its stable version was released on March 2018.
  • However, even before it’s first stable release it had already grabbed the attention of developers and got the popularity in the market due to the benefits like flexibility, simple integration methods and two-way communication.
  • Let me share my knowledge on some of the industry giants which has considered Vue.JS for their business case and implemented whole website/partial modules of the website using Vue.JS.
  • 9gag is a social networking website similar to Facebook with the newsfeed categories like Hot, Trending and Fresh categories. They have used Vue.JS for front-end to make it lightweight and highly responsive.
  • As per the statistics of SimilarWeb, it has 164.63M visitors in July 2018. Behance is one of the widely used websites by the Graphic designers to showcase their talents across the world.
  • They has used Vue.JS as a front-end programming language. As per the statistics of SimilarWeb, it has 49.29M visitors in July 2018.
  • Nintendo is a gaming console website from where gamers can buy their favorite games.
  • Nintendo has made a choice to use Vue.JS for the front-end. As per the statistics of SimilarWeb, it has 37.92M visitors in July 2018.
  • The online gaming website Chess.com has used Vue JS as a part of the front-end development for some of the website modules.
  • As per the statistics of SimilarWeb, it has 35.10M visitors in July 2018. Gitlab is a web-based version controlling repository for the source code which has several membership options.
  • The individual/organization can select one based on their requirement. It is developed using Vue on the front-end.
  • As per the statistics of SimilarWeb, it has 22.11M visitors in July 2018. The airline company Wizzair is using Vue JS for their official website to manage flight, hotel and cab booking.
  • Along with that, the user can check-in, manage the boarding via website and lot more. As per the statistics of SimilarWeb, it has 20.28M visitors in July 2018.
  • Font Awesome provides icons and social logos for both web and desktop application. They allow to download the basic icons offline as well you can purchase advanced icons.
  • They have used Vue JS on the front-end to make the website faster. As per the statistics of SimilarWeb, it has 11.48M visitors in July 2018.
  • The official website of Laravel uses Vue JS on the front-end and even while installing the Laravel, it takes Vue JS as a default front-end language since it’s lightweight and simple to integrate.
  • As per the statistics of SimilarWeb, it has 7.91M visitors in July 2018. Laracasts is a kind of Netflix for those who are looking to learn Laravel. It has multiple courses to learn various modules of Laravel.
  • It’s developed using Vue JS. As per the statistics of SimilarWeb, it has 5.67M visitors in July 2018.
  • Your search is over here! Techuz is one of the best Vue.JS development company that has proven experience in building feature-rich websites using Vue.JS framework.
  • 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 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.