Vue Examples

Posted on  by admin

In the repository(opens new window),there are a few example styleguides. Each tries to demonstrate one key aspect of what you can do with the library.Check out the github links to see how it's done.

Example of vue-styleguidist tested on IE11, please have a look at the webpack config of babel. Keywords: internet explorer, compatible, IE11,.

The general interface of the output styleguide can be completely changed. Style and assets. Keywords: styled, feature rich, branding, beautiful,.

Here we experiment how to mock the router in your showcases. Keywords: routing, window, global, mock, vue-router, router-link,.

Use vue-docgen-cli to integrate with vuepress sites. Keywords: vuepress, docgen, cli, vue-live, markdown,. Example of vue-styleguidist with functional tag.

Related Posts

# svg-loader

Keywords: functional, customized,. Even components using JSX templates are documented.

# vuecli3-class-pug-ts

Examples can contain jsx too. Keywords: jsx, buble, compiler, vue examples, functional,.

Use beside Nuxt.js and generate your styleguide besides your main app. Keywords: nuxt, nuxtjs, production ready, scaffolding,.

Here we experiment how to mock the router in your showcases. Keywords: routing, window, global, mock, vue-router, router-link,.

# vuex

To group components, sections are useful. Look at the left menu of this example. Here is an example of what can be done using an extenal loader.

Observe that the loader added to the cli is automatically added to styleguidist. What happens if you try to use the Vue CLI 3, install styleguidist, and omit to use the plugin.

# vuecli3

When using vue cli 3, prefer using the plugin using vue add styleguidist.

Here we showcase the wide variety of technologies vue-styleguidist supports. Keywords: technologies, typescript, sass, class-component,.

# jsx-examples

If you want to customize the styleguide and use the vue cli plugin change a little bit your babel config. This way your styleguide compoents are compiled with react jsx engine instead of vue.

Keywords: styled, feature rich, branding, beautiful, vuecli3, plugin,. Use vuetify, with internationalization within the vue cli.

Make sure you have a look at the vue.config.js transpiledDependencies. Keywords: internet explorer, compatible, IE11, vuetify, i18n,.

# basic

Example of vue-styleguidist tested on IE11, please have a look at the webpack config of babel.

Keywords: internet explorer, compatible, IE11,.

VueJS Examples and Templates:

No need to create your very own library to show it off with styleguidist. Use all common libraries.

If they are compatible with vue, they should be compatible with styleguidist.

# docgen

To use vuex or vue-router you might need some trickery.

Have a look at the config/styleguide.root.js file to get ideas on what to try. This example is a way to demontrate how to initialize global/window context usable by every component.

Keywords: laravel, token, CSRF, window, global,.

In this example, we try loading colors in each vue sfc.

# vuecli-noplugin

Just a head's up, it does not work anymore..

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.

– (

# router

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).

# functional-flag

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.

– ( 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 .

# vueds

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.

# with-laravel-token

Node Webkit + Vue example(opens new window) by @brandonjpierce.

Vue Samples(opens new window) by @superlloyd. HackerNews clone with vue.js + vue-router(opens new window) by @kazupon.

Electron + Vue example(opens new window) by @bradstewart.

Single page application example (Vue + Voie)(opens new window) by Boris Okunskiy(opens new window).

What is Vue JS?

Begin - Task Manager SPA written in Vue + Lumen(opens new window) by Raj Abishek(opens new window).

Vue SoundCloud(opens new window) by mul14(opens new window). Feature Requests (Laravel + Vue Combo)(opens new window) by haydenbbickerton(opens new window).

Vue Cookbook (Vue1.0 + express)(opens new window) by @yjj5855(opens new window): A demo first screen rendering of a service.

Strong Together(opens new window) - A starter project to build single page Vue.js apps as stand-alone or for Laravel / Laravel Spark projects, based on Browserify and Semantic-ui) by WebSemantics(opens new window).

# jsx

vue-shopping(opens new window) by andylei18(opens new window).

Vue-cnodejs,060(opens new window) by @shinygang(opens new window). vue-zhihu-daily(opens new window) by hilongjw(opens new window).

VueChess(opens new window) - Multiplayer online chess game.

Ngexplorer-vuejs-client(opens new window) - Vue client for Ngexplorer.

# customised

Vue 2048 (Vue + Webpack)(opens new window) by @pengfu(opens new window): Popular 2048-Game implemented using Vue,Webpack,Sass,ES6.

Tour of Heroes (Vue 2.0)(opens new window) - A Vue 2.0 port of the Angular 2.0 Tour of Heroes(opens new window) demo app.

Highlights: ES6/7, render functions, JSX, revue(opens new window) (redux bindings for Vue), vue-router, Airbnb eslint(opens new window), webpack.

by @aweber1(opens new window).

# vuecli3-vuetify-ie

vue-table-pagination(opens new window) A table with pagination by echovic(opens new window).

Feathers and Vue 2.0 Blog Admin Demo(opens new window) Demo for using Feathers with Vue 2.0.

It includes authentication, vue-router, vue-infinite-loading and roles by delay(opens new window).

vue-zhihudaily-2.0(opens new window) Zhihudaily demo built with Vue 2.0, vue-router & vuex, with server-side rendering.

# nuxtjs

by cs1707(opens new window).

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.

# with-sass-loader

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.

# vuetify

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)).

# dashed-component

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)).

# vuecli3-custom

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).

# sections

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 MVC dotnetcore project.

This template includes the VueJS client app and a backend API controller.

Why Vue JS?

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.

18. Vue Online Music Player

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).

19. Vue Hackernews 2.0

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).

20. Vue Node.js Youtube Clone

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,

vue-tetris (Use Vue, Vuex, Immutable to code Tetris)(opens new window) by @Binaryify(opens new window): Use Vue, Vuex, Immutable to code Tetris.

21. Jira Clone

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.

Do you know other repos?

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.