Showing preview only (279K chars total). Download the full file or copy to clipboard to get everything.
Repository: dobromir-hristov/vuecommunity
Branch: master
Commit: c0335fafdbcb
Files: 54
Total size: 261.9 KB
Directory structure:
gitextract_46wadhmg/
├── .github/
│ └── FUNDING.yml
├── .gitignore
├── README.md
├── docs/
│ ├── .vuepress/
│ │ ├── components/
│ │ │ ├── UsefulLinks.vue
│ │ │ └── UsefulLinksSection.vue
│ │ ├── config.js
│ │ ├── public/
│ │ │ ├── _redirects
│ │ │ └── favicons/
│ │ │ ├── browserconfig.xml
│ │ │ └── site.webmanifest
│ │ ├── styles/
│ │ │ └── index.styl
│ │ └── theme-styling/
│ │ ├── _media-query.scss
│ │ ├── _variables.scss
│ │ └── utils.scss
│ ├── README.md
│ ├── guide/
│ │ ├── README.md
│ │ ├── community/
│ │ │ ├── README.md
│ │ │ ├── adopt-vue-at-work.md
│ │ │ ├── conferences.md
│ │ │ ├── diversity.md
│ │ │ ├── job-market.md
│ │ │ ├── meetups.md
│ │ │ └── social-media.md
│ │ ├── ecosystem/
│ │ │ ├── boilerplates.md
│ │ │ ├── build-tools.md
│ │ │ ├── client-server-communication.md
│ │ │ ├── contributing.md
│ │ │ ├── desktop-apps.md
│ │ │ ├── documentation.md
│ │ │ ├── editors-and-tools.md
│ │ │ ├── forms.md
│ │ │ ├── gridsome.md
│ │ │ ├── hosting.md
│ │ │ ├── i18n.md
│ │ │ ├── legacy.md
│ │ │ ├── mobile-apps.md
│ │ │ ├── nuxt.md
│ │ │ ├── projects-worth-mentioning.md
│ │ │ ├── server-side-rendering.md
│ │ │ ├── static-site-generators.md
│ │ │ ├── testing.md
│ │ │ └── ui-libraries.md
│ │ └── learning/
│ │ ├── blogs.md
│ │ ├── books.md
│ │ ├── courses.md
│ │ ├── faq.md
│ │ ├── how-to-learn-vue.md
│ │ ├── learning-platforms.md
│ │ ├── official-documentation.md
│ │ ├── podcasts.md
│ │ ├── tips-from-mentors.md
│ │ ├── vue-3.md
│ │ └── workshops.md
│ └── multilingual/
│ └── spanish.md
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: dobromir-hristov
ko_fi: dobromir_hristov
================================================
FILE: .gitignore
================================================
node_modules
.idea
================================================
FILE: README.md
================================================
# Vue Community
This is the source code repo for [vue-community.org](https://vue-community.org).
## Contribution
If you want to contribute, please, feel free to look into the [Issues](https://github.com/dobromir-hristov/vuecommunity/issues), pick one which relates to a topic you are comfortable with writing about.
All help is welcome as the project is only getting bigger.
================================================
FILE: docs/.vuepress/components/UsefulLinks.vue
================================================
<template>
<div class="UsefulLinks">
<slot/>
</div>
</template>
<script>
/**
* @module UsefulLinks
*/
export default {
name: 'UsefulLinks'
}
</script>
<style lang="scss">
@import "../theme-styling/utils";
.UsefulLinks {
padding: $spacing;
padding-left: 0;
border-radius: 2px;
color: $color-gray;
box-shadow: $box-shadow;
margin: $spacing-xlarge 0;
}
</style>
================================================
FILE: docs/.vuepress/components/UsefulLinksSection.vue
================================================
<template>
<div class="UsefulLinksSection">
<div class="UsefulLinksSection__title">
{{ title }}
</div>
<div class="UsefulLinksSection__content">
<slot/>
</div>
</div>
</template>
<script>
/**
* @module UsefulLinksSection
*/
export default {
name: 'UsefulLinksSection',
props: {
title: {
type: String,
default: ''
}
}
}
</script>
<style lang="scss">
@import "../theme-styling/utils";
.UsefulLinksSection {
display: flex;
flex-flow: column wrap;
margin-bottom: $spacing;
align-items: flex-start;
& + & {
margin-top: $spacing;
padding-top: $spacing;
border-top: 1px solid $border-default-color;
}
&:last-of-type {
margin-bottom: 0;
}
&__title {
font-weight: bold;
border-left: 4px solid $color-primary;
padding-left: $spacing-tiny;
margin-bottom: $spacing;
color: transparentize($color-gray, .1);
}
&__content {
padding-left: $spacing-small;
p {
line-height: 1.2;
font-size: 0.9rem;
margin: 0;
& + p {
margin-top: $spacing-small;
padding-top: $spacing-small;
border-top: 1px solid $border-default-color;
}
}
a .icon.outbound {
margin-left: $spacing-tiny/2;
}
ul {
line-height: 1.2;
font-size: 0.9rem;
margin: 0;
list-style-type: none;
padding: 0;
li {
margin-bottom: $spacing-small;
padding-bottom: $spacing-small;
&:last-of-type {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
}
}
@include tablet-landscape-and-up {
flex-flow: row;
/*margin-bottom: 0;*/
&__title {
flex: 1 1 30%;
margin-bottom: 0;
}
&__content {
flex: 1 1 70%;
}
}
}
</style>
================================================
FILE: docs/.vuepress/config.js
================================================
const autometaOptions = {
image: false,
site: {
name: 'Vue Community'
},
canonical_base: 'https://vue-community.org'
}
module.exports = {
locales: {
'/': {
lang: 'en-US',
title: 'Vue Community',
description: 'The community guide to Vue.js'
}
},
plugins: [
[
'@vuepress/google-analytics',
{
'ga': 'UA-29425482-12'
}
],
[
'container',
{
type: 'contribute',
before: () => `<div class="tip custom-block">
<p><strong>This section could use a little bit of love.</strong></p>
<p>If you're able to, please consider helping the Vue Community by contributing a PR.</p>
<p>You'll find a link to edit this page at the bottom.</p>`
,
after: '</div>'
}
],
['autometa', autometaOptions]
],
// serviceWorker: true,
themeConfig: {
algolia: {
apiKey: '8c789b5d0ee680a4a383673877be347d',
indexName: 'vue-community'
},
logo: '/logo_pin.png',
docsDir: 'docs',
repo: 'https://github.com/dobromir-hristov/vuecommunity',
editLinks: true,
sidebarDepth: 3,
locales: {
'/': {
label: 'English',
selectText: 'Languages',
editLinkText: 'Edit this page on GitHub',
nav: [
{
text: 'Guide',
link: '/guide/'
},
{
text: 'Multilingual Resources',
items: [
{ text: 'Spanish', link: '/multilingual/spanish.md' }
]
}
],
sidebar: [
'/',
{
title: 'Community',
collapsable: false,
children: [
'/guide/community/conferences.md',
'/guide/community/meetups.md',
'/guide/community/social-media.md',
'/guide/community/diversity.md',
'/guide/community/job-market.md',
'/guide/community/adopt-vue-at-work.md'
]
},
{
title: 'Learning',
collapsable: false,
children: [
'/guide/learning/official-documentation.md',
'/guide/learning/how-to-learn-vue.md',
'/guide/learning/vue-3.md',
'/guide/learning/learning-platforms.md',
'/guide/learning/courses.md',
'/guide/learning/books.md',
'/guide/learning/blogs.md',
'/guide/learning/podcasts.md',
'/guide/learning/faq.md',
'/guide/learning/tips-from-mentors.md',
'/guide/learning/workshops.md'
]
},
{
title: 'Ecosystem',
collapsable: false,
children: [
'/guide/ecosystem/editors-and-tools.md',
'/guide/ecosystem/ui-libraries.md',
'/guide/ecosystem/forms.md',
'/guide/ecosystem/boilerplates.md',
'/guide/ecosystem/client-server-communication.md',
'/guide/ecosystem/documentation.md',
'/guide/ecosystem/hosting.md',
'/guide/ecosystem/i18n.md',
'/guide/ecosystem/testing.md',
'/guide/ecosystem/mobile-apps.md',
'/guide/ecosystem/desktop-apps.md',
'/guide/ecosystem/nuxt.md',
'/guide/ecosystem/server-side-rendering.md',
'/guide/ecosystem/static-site-generators.md',
'/guide/ecosystem/build-tools.md',
'/guide/ecosystem/projects-worth-mentioning.md',
'/guide/ecosystem/legacy.md',
'/guide/ecosystem/contributing.md'
]
}
]
}
}
},
head: [
['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/favicons/apple-touch-icon.png' }],
['link', { rel: 'icon', type: 'image/,png', sizes: '32x32', href: '/favicons/favicon-32x32.png' }],
['link', { rel: 'icon', type: 'image/,png', sizes: '16x16', href: '/favicons/favicon-16x16.png' }],
['link', { rel: 'manifest', href: '/favicons/site.webmanifest' }],
['link', { rel: 'mask-icon', href: '/favicons/safari-pinned-tab.svg', color: '#5bbad5' }],
['link', { rel: 'shortcut icon', href: '/favicons/favicon.ico' }],
['meta', { name: 'msapplication-TileColor', content: '#ffffff' }],
['meta', { name: 'msapplication-config', content: '/favicons/browserconfig.xml' }],
['meta', { name: 'theme-color', content: '#ffffff' }],
['meta', { property: 'og:image', content: '/cover.png' }],
['meta', { property: 'twitter:image:src', content: 'https://vue-community.org/cover.png' }]
]
}
================================================
FILE: docs/.vuepress/public/_redirects
================================================
https://vuecommunity.netlify.com/* https://vue-community.org/:splat 301!
# Redirect domain aliases to primary domain
https://vuecommunity.org/* https://vue-community.org/:splat 301!
================================================
FILE: docs/.vuepress/public/favicons/browserconfig.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/favicons/mstile-150x150.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>
================================================
FILE: docs/.vuepress/public/favicons/site.webmanifest
================================================
{
"name": "Vue Comunity",
"short_name": "Vue Comunity",
"icons": [
{
"src": "/favicons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
================================================
FILE: docs/.vuepress/styles/index.styl
================================================
.content
blockquote {
color: #575757
border-left-color: #bbc3d1
background: #f5f5f5;
}
#app .home .hero img
max-height 135px;
.theme-default-content:not(.custom) {
& > h1, h2, h3, h4, h5, h6 {
margin-left: -1rem;
}
}
================================================
FILE: docs/.vuepress/theme-styling/_media-query.scss
================================================
$mq-mobile-portrait: 320px !default;
$mq-mobile-landscape: 480px !default;
$mq-tablet-portrait: 768px !default;
$mq-tablet-landscape: 1024px !default;
$mq-desktop: 1382px !default;
// Both portrait and landscape
@mixin mobile-only {
@media (max-width: $mq-mobile-landscape) {
@content;
}
}
// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
@mixin mobile-portrait-only {
@media (max-width: $mq-mobile-portrait) {
@content;
}
}
// Everything up to and including the mobile portrait
@mixin mobile-portrait-and-below {
@media (max-width: $mq-mobile-portrait) {
@content;
}
}
// Everything above and including the mobile portrait
@mixin mobile-portrait-and-up {
@media (min-width: $mq-mobile-portrait) {
@content;
}
}
// Everthing larger than a portrait mobile up until mobile landscape
@mixin mobile-landscape-only {
@media only screen and (min-width: $mq-mobile-portrait + 1) and (max-width: $mq-mobile-landscape) {
@content;
}
}
// Everything up to and including the mobile landscape width
@mixin mobile-landscape-and-below {
@media only screen and (max-width: $mq-mobile-landscape) {
@content;
}
}
// Everything above and including the mobile landscape width
@mixin mobile-landscape-and-up {
@media only screen and (min-width: $mq-mobile-portrait + 1) {
@content;
}
}
// Both the portrait and landscape width of the tablet
// Larger than a landscape mobile but less than or equal to a landscape tablet
@mixin tablet-only {
@media only screen and (min-width: $mq-mobile-landscape + 1) and (max-width: $mq-tablet-landscape) {
@content;
}
}
// Everything larger than mobile landscape up until the portrait width of the tablet
@mixin tablet-portrait-only {
@media only screen and (min-width: $mq-mobile-landscape + 1) and (max-width: $mq-tablet-portrait) {
@content;
}
}
// Everything below and including the portrait width of the tablet
@mixin tablet-portrait-and-below {
@media only screen and (max-width: $mq-tablet-portrait) {
@content;
}
}
// Everything above and including the portrait width of the tablet
@mixin tablet-portrait-and-up {
@media only screen and (min-width: $mq-mobile-landscape + 1) {
@content;
}
}
// Larger than portrait but less than or equal to the landscape width
@mixin tablet-landscape-only {
@media only screen and (min-width: $mq-tablet-portrait + 1) and (max-width: $mq-tablet-landscape) {
@content;
}
}
// Up to and including the tablet landscape
@mixin tablet-landscape-and-below {
@media only screen and (max-width: $mq-tablet-landscape) {
@content;
}
}
// Everything larger than portrait tablet
@mixin tablet-landscape-and-up {
@media only screen and (min-width: $mq-tablet-portrait + 1) {
@content;
}
}
// Everything larger than a landscape tablet
@mixin desktop-and-up {
@media only screen and (min-width: $mq-tablet-landscape + 1) {
@content;
}
}
// Everything below and including the desktop
@mixin desktop-and-below {
@media only screen and (max-width: $mq-desktop) {
@content;
}
}
// Everything larger than a landscape tablet but less than or equal to the desktop
@mixin desktop-only {
@media only screen and (min-width: $mq-tablet-landscape + 1) and (max-width: $mq-desktop) {
@content;
}
}
// Retina screens have a 1.5 pixel ratio, not 2
@mixin retina {
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
@content;
}
}
================================================
FILE: docs/.vuepress/theme-styling/_variables.scss
================================================
$color-primary: #3eaf7c;
$color-white: hsl(0, 0%, 100%);
$color-white-ter: hsl(0, 0%, 93%);
$color-white-bis: hsl(0, 0%, 95%);
$color-gray: hsl(0, 0%, 42%);
$color-gray-light: hsl(215, 14%, 84%);
$border-default-color: $color-gray-light;
$box-shadow: 0 1px 3px 0 hsla(232, 23%, 47%, 0.2);
$spacing-tiny: .5rem;
$spacing-small: .75rem;
$spacing: 1rem;
$spacing-medium: 1.25rem;
$spacing-large: 1.5rem;
$spacing-xlarge: 2rem
================================================
FILE: docs/.vuepress/theme-styling/utils.scss
================================================
@import "./variables";
@import "./media-query";
================================================
FILE: docs/README.md
================================================
---
home: true
actionText: Get Started →
actionLink: /guide/
heroImage: /logo_full.svg
heroAlt: Vue Community Guide
heroText:
features:
- title: Community
details: Find information about the various Vue community projects, conferences or the current job market.
- title: Learning
details: Dive deeper into the many possible ways to learn Vue.js, from official documentation to books and video courses.
- title: Ecosystem
details: Explore popular tools and libraries like Nuxt, Vuetify or Vuepress. Learn about their specific use cases and differences.
footer: MIT Licensed
---
Welcome to a beginner's guide to Vue.js community and ecosystem, written and maintained by the community itself.
Alongside the official documentation like the [guide](https://vuejs.org/v2/guide/) or [cookbook](https://vuejs.org/v2/cookbook/) both of which are meant to teach you how to use Vue.js, this website focuses more on helping newcomers to find their way around the evergrowing ecosystem, by providing meaningful summaries or comparisons of popular projects and available resources.
The goal is to gather the answers to the most common questions asked by new Vue.js developers, grouped by categories and written in an easy to digest way, with links to further materials on the topic.
================================================
FILE: docs/guide/README.md
================================================
# Sitemap
## Community
* [Conferences](./community/conferences.md) - Information about past Vue conferences
* [Meetups](./community/meetups.md) - Where to find meetups, tips on how to organise a local meetup
* [Media](./community/social-media.md) - Popular Vue communities such as chats, forums and social platforms
* [Diversity](./community/diversity.md) - Diversity and inclusion in Vue.js
* [Job Market](./community/job-market.md) - How to find job with Vue.js and related topics
* [Adopting Vue at work](./community/adopt-vue-at-work.md) - How to pitch Vue at your workplace
## Learning
* [Official Documentation](./learning/official-documentation.md) - All the official Vue docs, listed on one place
* [How to learn Vue](./learning/how-to-learn-vue.md) - Tips on how to learn Vue if coming from other technologies
* [Vue 3](./community/vue-3.md) - Vue 3 learning resources and plugins
* [Learning platforms](./learning/learning-platforms.md) - Learning platforms that also offer Vue.js video courses
* [Video Courses](./learning/courses.md) - Popular Vue video courses
* [Books](./learning/books.md) - Books about Vue development
* [Blogs](./learning/blogs.md) - Popular Vue related blogs.
* [Podcasts](./learning/podcasts.md) - Vue podcasts or single episodes talking about Vue
* [Frequently Asked Questions](./learning/faq.md) - Answers to most common questions asked by Vue developers
* [Tips from Mentors](./learning/tips-from-mentors.md) - How Vue experts began with Vue, tips on how to learn
* [Workshops](./learning/workshops.md) - What are Vue workshops and where to find them
## Ecosystem
* [Editors and Tools](./ecosystem/editors-and-tools.md) - List of popular code editors and setups for Vue development
* [UI Libraries](./ecosystem/ui-libraries.md) - Pros and Cons of the most popular Vue UI libraries
* [Handling Forms](./ecosystem/forms.md) - Libraries for handling forms with Vue
* [Boilerplates](./ecosystem/boilerplates.md) - Vue boilerplates
* [Client-Server Communication](./ecosystem/client-server-communication.md) - How to use Vue with REST, GraphQL or websockets
* [Documentation platforms](./ecosystem/documentation.md) - Generating and maintaining documentation for Vue projects
* [Hosting](./ecosystem/hosting.md) - Where to host your Vue apps
* [i18n](./ecosystem/i18n.md) - Internationalization (i18n) for Vue
* [Mobile Apps](./ecosystem/mobile-apps.md) - PWA, native and hybrid mobile applications
* [Desktop Apps](./ecosystem/desktop-apps.md) - Building Desktop Apps with Vue
* [Nuxt](./ecosystem/nuxt.md) - Overview of Nuxt.js and its ecosystem
* [Server Side Rendering](./ecosystem/server-side-rendering.md) - Available tools for SSR
* [Static Site Generators](./ecosystem/static-site-generators.md) - Technologies to create static sites like landing pages or blogs
* [Build Tools](./ecosystem/build-tools.md) - Build tools used across Vue ecosystem
* [Projects worth mentioning](./ecosystem/projects-worth-mentioning.md) - Important Vue projects that don't fit in other categories.
* [Legacy Packages](./ecosystem/legacy.md) - Outdated or deprecated Vue packages and features
* [Contributing](./ecosystem/contributing.md) - Notes on contributing to the ecosystem
================================================
FILE: docs/guide/community/README.md
================================================
# Vue Community Ecosystem
================================================
FILE: docs/guide/community/adopt-vue-at-work.md
================================================
---
title: Adopting Vue at work
---
# Making a case for Vue at your company
Selling the idea to use Vue.js in the upcoming company project or a rewrite of legacy application is a difficult task that requires some preparation. Both the higher ups and your coworkers may have different experience, preferences and bias toward alternative technologies. They may come with multiple arguments against the use of Vue.
Other than showing your own enthusiasm and trust in Vue.js by providing your own reasoning as for why Vue.js is a better fit in your opinion. It's important to know how to counter those arguments and how to back them up with data and links to related articles and sources.
## Strongest points of Vue.js
- Easy to get started with
- Easily readable components
- Progressively embeddable into websites
- Can work without build tools
## In defense of Vue.js
Here's a list of the most common arguments against the use of Vue.js that may be used in a discussion, with hints on how to deal with them. Some of those arguments may be more or less valid depending on the case, so it's important to not only provide a reasoning against them, but also explain what Vue.js community does to mitigate the issues.
### Argument against Vue
*Short description of the argument and its variants*
Reasoning against it and data to back it up.
### Vue.js lacks the backing of a big company and is a one man project
*The lack of a large company backing is the most often argument raised in such discussions. This also includes the accusations that Vue.js is being written by one person and if Evan You goes away, it won't be properly maintained anymore.*
### It's more difficult to find a good Vue.js developer
*This argument is based on two assumptions: that the difference in userbase between Vue.js and its main alternatives is significant. Because of that, it's more difficult to find experienced developers to hire on the job market.*
The recommended course of action would be to address both mentioned worries. You can show the importance of the low entry level of Vue.js in comparison to other frameworks. Thanks to that, both junior and senior developers can get up to speed with Vue faster. This makes the adoption easier, as the company can spend less resources on educating their developers. In a result, Vue.js can be a more productive and a cheaper option at the same time.
There is also less competition on the market for experienced Vue.js developers, so it doesn't necessarily have to be more difficult at all. In fact, the gap between the number of job adverts for React or Angular is way bigger than the gap in the workforce, so this may play to the advantage of Vue.js.
### It's more difficult to find help with Vue.js
*Another argument based on the size of the community and ecosystem around Vue.js. A commonly mentioned data to back it up is the number of Stack Overflow answers.*
Vue.js has its own forum where you can find lots of the most common questions already answered. Along with that is the Vueland Discord Chat, which has a very active userbase, who help and answer user questions. Last by not least is the Vue Docs, which usually has answers to most of the questions new Vue developers are looking for.
Stack overflow also helps but the quality of the answers there is not always great.
### There's not enough success stories of big companies using Vue.js
*Argument lies on the small amount of large or popular companies that use Vue in their applications*
This argument is also a bit misleading to the people living in the Western world. Vue has a huge market share in Asia, where titans in the industry use it on a daily basis.
Here is a nice post by Michał Sajnóg on Netguru titled [13 Top Companies That Have Trusted Vue.js](https://www.netguru.com/blog/13-top-companies-that-have-trusted-vue.js-examples-of-applications) which does a good job at listing some of those big companies.
### There's no clear set of best practices and guidelines of how to use Vue.js on enterprise level
*This argument was actually a valid one for quite some time. As large companies started adopting Vue in their projects, none of them shared patterns or tips to the Vue userbase.*
Currently one of the most referenced Vue enterprise resources is Chris Fritz's [Vue Enterprise Boilerplate](https://github.com/chrisvfritz/vue-enterprise-boilerplate/) which is filled with good practices for large scale Vue applications.
You can a look at our [Boilerplates](../ecosystem/boilerplates.md) page, where we dive deeper into the official Vue boilerplates.
<useful-links>
<useful-links-section title="Tutorials">
* [Vue.js Application Structure and CSS Architecture](https://markus.oberlehner.net/blog/vue-application-structure-and-css-architecture/)
* [Making a large scale app with vue.js](https://medium.com/@stephane.souron/making-a-large-scale-app-with-vue-js-part-1-modularize-your-store-bf9066436502)
* [How to Structure a Vue.js Project](https://itnext.io/how-to-structure-a-vue-js-project-29e4ddc1aeeb)
</useful-links-section>
</useful-links>
### There's no native mobile solution as good as React Native
*Argument coming from the fact that Vue does not have a solution like React Native, which is kind of an official way to write truly Native mobile applications in React*
Even though Vue does not have an official solution, like React Native for React, its versatility has allowed for a few very good solutions to come up like Nativescript-Vue, Quasar and Vue Native.
<useful-links>
<useful-links-section title="Learn More">
[Mobile Apps Page](../ecosystem/mobile-apps.md)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/community/conferences.md
================================================
# Conferences
<useful-links>
<useful-links-section title="Video archive">
- [Vue Conference Videos By Vue Mastery](https://www.vuemastery.com/conferences)
</useful-links-section>
<useful-links-section title="See also">
- [Vue.js Events](events.vuejs.org) - Official events and community portal
</useful-links-section>
</useful-links>
Here we will list Vue Conferences around the world and what is unique about them.
## VueConf US
Hosted by Evan You
<useful-links>
<useful-links-section title="Links">
- [us.vuejs.org](https://us.vuejs.org)
</useful-links-section>
</useful-links>
## VueConf Toronto
> Join 10,000+ Vue.js developers from more than 100 countries for a two-day conference to learn and discuss about the latest of Vue.js and related technologies
<useful-links>
<useful-links-section title="Links">
- [vuetoronto.com](https://vuetoronto.com/)
- [YouTube Channel](https://www.youtube.com/c/VueConfToronto)
</useful-links-section>
</useful-links>
## Vue.js Amsterdam
> Vuejs Amsterdam is the Largest & Most Epic Vue Conference in the World
<useful-links>
<useful-links-section title="Links">
- [vuejs.amsterdam](https://vuejs.amsterdam)
- [YouTube Channel](https://www.youtube.com/c/VuejsAmsterdam)
</useful-links-section>
</useful-links>
## Vue.js London
<useful-links>
<useful-links-section title="Links">
[vuejs.london](https://vuejs.london)
</useful-links-section>
</useful-links>
::: contribute
:::
================================================
FILE: docs/guide/community/diversity.md
================================================
# Diversity and Inclusion
Diversity and inclusion are important shared values in the Vue.js community. There are several initiatives that aim to boost different aspects of diversity. Most of these initiatives are grass-roots activities occurring within the community and supported by the Core Team.
For example, most Vue.js conferences offer discounted or free diversity tickets to help encourage more diverse attendance.
A lot of good work is also done by individuals in the community who blaze the trails for their peers, making it easier for other representants of minorities to get more active too.
## Vue Vixens
Founded in 2018, Vue Vixens is [led](http://vuevixens.org/team) by CEO Jen Looper, CTO Michele Cynowicz, and Worldwide Community Organizer Diana Rodriguez. A program that aims to promote gender diversity within the Vue.js community, Vue Vixens as an organization is specifically focused on promoting people who identify as women, helping them learn Vue.js to build web and mobile apps and build their careers.
They partner with Vue.js conferences to provide free workshops for attendees and other community members either for full-day or for mini three-hour classes called "skulks" centered around specific topics from Vue.js ecosystem. The workshop content was prepared by many members of the Vue Vixens community.
Vue Vixens also engages the community in other ways, including crafting full-day events such as Vue Vixens Day Argentina and providing support to local chapters which are led by [chapter leaders](https://www.vuevixens.org/team) around the world.
Vue Vixens' mission is to mentor people who identify as women both on social media, personal interactions and conferences. Their goal is to boost the number of women-identifying people who attend and speak at the events or try their skills as content creators, to help mid-career and senior women stay engaged by learning new technologies, and to help new developers enter the workforce.
<useful-links>
<useful-links-section title="Official">
* [Official Website](https://vuevixens.org)
* [Chat on Slack](https://slackin-fxsumkvfno.now.sh/)
* [Twitter profile](https://twitter.com/VueVixens)
* [Blog](https://dev.to/vuevixens)
</useful-links-section>
</useful-links>
## Concatenate Conference
Concatenate is a free conference created by [Christian Nwamba](https://twitter.com/codebeast), known for his popular Vue.js course, and Vue.js Core Team member [Sarah Drasner](https://twitter.com/sarah_edo).
Hosted in Lagos, Nigeria, it attracted the participation of top tier speakers from around the world, eager to network and share their knowledge with those who often find it difficult to attend such events on other continents.
Having people from Vue.js community take part in organizing such an undertaking both makes us proud and gives a lot of much needed hope.
<useful-links>
<useful-links-section title="Official">
* [Official Website](https://concatenate.io)
* [Review](https://technext.ng/2018/08/13/heres-all-went-down-concatenate-developers-conference)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/community/job-market.md
================================================
# Job Market
Short info about the current Vue.js job market and its growth in the past years.
## VueJobs <badge text="Popular"/>
[VueJobs](https://vuejobs.com) is a job market advertisement platform with the status of an official Vue.js community partner. It allows both job adverts from companies as well as creating developer profiles by individual Vue.js professionals.
The job posts are shared across multiple social media platforms, both own accounts as well as through partner sites like the official [Vue Newsletter](https://news.vuejs.org).
Developers looking for a Vue.js related job can also subscribe to a weekly newsletter or take part in discussions on VueJob's [chat on Discord](), where professionals from around the world share their experiences and impressions from companies offering job with Vue.
A significant percentage of the income is distributed to the authors of both Vue.js and key ecosystem projects.
<useful-links>
<useful-links-section title="Official">
* [Official website](https://vuejobs.com)
* [Chat on Discord](https://discord.gg/kVqcTzj)
</useful-links-section>
<useful-links-section title="Tutorials">
* [List of 300 VueJS Interview Questions And Answers](https://github.com/sudheerj/vuejs-interview-questions)
* [Vue js Interview questions and answers](https://www.onlineinterviewquestions.com/vue-js-interview-questions/)
</useful-links-section>
</useful-links>
## Other Platforms
### StackOverflow
[Stack overflow](https://stackoverflow.com/jobs/developer-jobs-using-vuejs) has an active jobs section and it has been getting an increase of Vue related job offers lately.
### JSRemotely
[JS Remotely](https://jsremotely.com/) includes Vue.js among its filters. There should be a new job post around once a week with various seniority level.
## What Skills are Employers Looking for in Vue Developers
> Some explanation on what is most commonly searched for by employers when looking for Vue developers. Common pitfalls. This section should provide a general overview and leave the individual cases for the next one.
## Tips from the Employers' Side
The guidelines listed in this section come from actual Human Resources workers or Vue.js developers who take active part in the recruitment process in their respective companies. Unlike the summary above, these tips come from individual experiences and should be treated as such.
They won't necessarily apply to each use case but they provide good insight into what you should expect on different stages of job hunting.
### Dobromir Hristov - Vue Bulgaria speaker and organiser
Below is a list of common skills that I think can make a developer standout from the crowd when applying for a job as a mid to senior Vue developer.
No one is expecting you to know them all, but the more you know, the better first impression you will make.
- Multi level component communication - Vuex, Buss or other pub-sub mechanism, Vue Events - Know when you should chose one over the other, pros and cons of them.
- Popular Vue framework knowledge - When does it make sense to use a framework and when not. Which one can fit for the job without major rewrite of styles or functionality. Is one following better UX practices than the other?
- Mobile Device Framework - Should you go with a PWA, Native code compiled or Cordova Hybrid app. Pro's and Cons of each.
- Large Form Handling - How to handle large, complicated forms, reuse common logic across components, data validation.
- Code Reusability - Methods of sharing code across components - Mixins, Factories, Services, Store Actions, Utility Functions, these can make a big difference in large applications.
- Component Framework Styling Patterns - What naming patterns to choose when styling components. Should you go with `BEM`, `SMACSS`, `Scoped` or `Module` styles. Would preprocessors make sense in the project.
- Code Documentation - Ways of documenting components and related code - `JSDOC`, `.ts` definitions, Component usage examples like using Storybook
- Popular Coding Standards (ESLint, Prettier) - Understanding the need for ESLint or Prettier in a project. How to set it up and when to override popular presets.
- Basic Webpack Knowledge - Knowing how Webpack works and to setup its build chain is always a plus, even when using Vue CLI.
- Code Optimisation - Dynamic Imports (when does it make sense), Code Speed Optimisation, Time to first paint, General Page Speed Optimisations, Working on slow networks.
- Cross Browser compatibility - Polyfilling, Ponyfilling and graceful fallback for older browsers that your app supports.
I advice you to apply for a position, even if you don't cover all the points. Depending on the position, most of the times there will be a senior developer guiding you to improve where you are lacking.
A few general advices wen applying to any job ad:
- Don't answer interview questions with just one word. Explain very briefly why you chose that answer.
- If a project is still in discussion phase, you can steer towards using Vue as a framework by showcasing usage examples and it's benefits.
- Do some research about the company. Does it use Vue for other projects. Does it contribute to Open Source libraries. Does it boast a healthy working environment.
================================================
FILE: docs/guide/community/meetups.md
================================================
# Meetups and Events
Meetups and Events hold a crucial role in building a strong community. Both newcomers and seasoned developers can benefit from meeting and interacting with people from various levels of expertise and backgrounds.
A typical meetup can vary from just a gathering at a bar/restaurant, to more learning oriented ones, where speakers give small talks, on a topic they are passionate about. The first part is better for bonding and finding fresh blood, where as the second one is better for leveling up the group's expertise. Both attendees skills as well as the speaker's teaching abilities can greatly improve with such events.
## Events.vuejs.org
Finding or organising a local meetup in your area can be quite hard, as it involves a lot of searching, preparations, etc.
[events.vuejs.org](https://events.vuejs.org) is the official guide to finding meetups, conferences, workshops and more in the Vue ecosystem. It is maintained and curated by Vue Core members, but contributions from the community are more than welcome.
<useful-links>
<useful-links-section title="Features">
* [List of upcoming events](https://events.vuejs.org/events/) - Conferences, Workshops, Local Meetups
* [List of local groups](https://events.vuejs.org/meetups/) - "Meetups" groups, Facebook groups, local group chats, etc.
* [Handbook for Organisers](https://events.vuejs.org/resources/#organizers-handbook) - helpful tips on how ot run a meetup.
* [Handbook for Speakers](https://events.vuejs.org/resources/#speakers-handbook) - Tips, list of potential topics for new speakers.
</useful-links-section>
</useful-links>
## Spread the Word
You can popularize your event by announcing it on the Official Vue Chat, Tweeting with hashtag `#VueJS` and `#VueJSMeetups` or even directly writing to [VueMeetups](https://twitter.com/vuemeetups) on Twitter.
You can also ask on Discord to be promoted to a Community Leader, so you can discuss and share experience with other meetup organizers around the world.
If you want Vue stickers to giveaway at meetups, you can contact the people at [VueJobs](https://vuejobs.com/), they give them out for free for meetup organisers.
================================================
FILE: docs/guide/community/social-media.md
================================================
# Media
## Official Chat
Official Vue.js chat on Discord gathers thousands of developers from around the world. Among the many channels, the most popular ones are #need-help where you can share your develompent related issues and #general if you have some questions about Vue.js itself. Other channels are dedicated to particular topics, such as #best-practices, #vuex, #jobs or #mobile-apps.
The chat's main language is English, but there are also rooms for conversations in other languages. Many bigger Vue.js libraries have their own Discord servers or chats on other platforms, so they don't have their own channel on VueLand. To learn about them, take a look at the [Other Platforms](./social-media.md#other-platforms) section.
Remember that people you discuss with are not obligated to provide help and that they're not there all the time, so it can take a while to receive an answer. It may also vanish under other messages. If your problem is more complex and can take longer to solve, it may be wiser to share it on the forum and then link it on the chat.
Occasionally the chat's team organizes Q&A sessions with two or more important members of the Vue.js community. Each Q&A has a specific topic where the special guests answer questions, asked by other users.
<useful-links>
<useful-links-section title="Official">
* [Vue.js chat on Discord](https://chat.vuejs.org)
* [Vue.js chat's website](https://vue-land.js.org)
</useful-links-section>
</useful-links>
## Official Forum
Official Vue forum is a SEO friendly alternative to the chat. It's especially helpful if you expect to take longer to get the answer and can afford to wait for it. The forum's team is managed by Thorsten Lünborg, but you can also find help from other Core Team members there from time to time.
<useful-links>
<useful-links-section title="Official">
[Vue.js forum on Discourse](https://forum.vuejs.org)
</useful-links-section>
</useful-links>
## Stack Overflow
Stackoverflow's Vue.js section is a common place for people to ask questions related to programming with Vue.
<useful-links>
<useful-links-section title="Official">
[Vue.js Section](https://stackoverflow.com/tags/vue.js/info)
</useful-links-section>
</useful-links>
## Newsletters
Vue.js News is an official Vue.js weekly newsletter, curated by Damian Dulisz, member of the Vue.js Core Team. There's also an audio podcast version of it, prepared by Adam Jahr and Gregg Pollack from VueMastery learning platform.
If you want your new resource covered in the upcoming edition, submit it using the form on the website. While the newsletter typically shows up on Tuesday, the podcast has to be prepared sooner, so make sure to submit your content until Sunday. If some articles, libraries or tutorials are missed in the current edition, they may still show up next week.
<useful-links>
<useful-links-section title="Official">
[Vue.js News](https://news.vuejs.org/) - Official Vue.js newsletter, curated by Damian Dulisz, and podcast by Gregg Pollack and Adam Jahr.
</useful-links-section>
<useful-links-section title="Other Newsletters">
- [Vue.js Feed](https://vuejsfeed.com/) - One of the earliest Vue newsletters, maintained by Kostas Maniatis, co-author of the book "Majesty of Vue".
- [Vue.js Developers](https://vuejsdevelopers.com/newsletter) - Newsletter of the Vue.js Developers blog, with a weekly unique article from their blog along with posts from other sources.
- [MadeWithVuejs](https://madewithvuejs.com/) - A more recent newsletter, showcasing plugins, packages and websites built with Vue.
</useful-links-section>
</useful-links>
## Vue People
[VuePeople.org](https://vuepeople.org) is an interactive map of Vue.js developers and enthusiasts around the world, with a possibility to filter them with tags. The plan for the future is to make it network that connects the Vue.JS community not only with each other, but also with events and work opportunities. You can register via your Github account.
## Influential People on Twitter
Twitter is the first place where developers share updates on their packages, discuss ideas, point out findings, do polls or just ask for advice.
<useful-links>
<useful-links-section title="Tutorials">
* [List of influential Twitter profiles in Vue.js](https://medium.com/hypefactors/list-of-influential-twitter-profiles-in-the-vue-js-community-state-of-2018-cca15ec1144a)
* [People to Watch If You’re a Vue.js Developer](https://www.monterail.com/blog/people-to-watch-if-youre-a-vue.js-developer)
</useful-links-section>
</useful-links>
## Other Platforms
As the Vue community continues to grow, there are more and more specialized groups appearing on various social platforms. We list some of them below, together with Vue-related groups in other services.
<useful-links>
<useful-links-section title="Discord">
- [Nuxt](https://discord.nuxtjs.org/)
- [Vuetify](https://community.vuetifyjs.com/)
- [Quasar](https://discord.gg/5TDhbDg)
- [VueJobs](https://discordapp.com/invite/PJrSZqm)
- [Vue Material](https://discord.gg/vuematerial)
- [Gridsome](https://discordapp.com/invite/7znJUkH)
- [Vuesax](https://discord.gg/9dsKtvB)
- [Buefy](https://discordapp.com/invite/ZkdFJMr)
- [Bootstrap Vue](https://discordapp.com/invite/j2Mtcny)
- [EGOIST OSS](https://discord.gg/2t5mdCz) - dedicated to libraries written by Egoist, one of Vue.js community partners known for writing many useful plugins.
</useful-links-section>
</useful-links>
<useful-links>
<useful-links-section title="Slack">
- [VueVixens](https://slackin-fxsumkvfno.now.sh/)
- [NativeScript-Vue](https://developer.telerik.com/wp-login.php?action=slack-invitation)
</useful-links-section>
</useful-links>
<useful-links>
<useful-links-section title="Gitter">
- [WeexEn](https://gitter.im/weex-en/)
- [Element-UI](https://gitter.im/element-en/)
- [iView](https://gitter.im/iview/iview)
- [Semantic-ui-vue](https://gitter.im/Semantic-UI-Vue/)
</useful-links-section>
</useful-links>
<useful-links>
<useful-links-section title="Facebook">
- [Vue.js Developers](https://www.facebook.com/groups/vuejsdevelopers/)
- [Laravel + Vue.js Developers](https://www.facebook.com/groups/1796516540421476)
</useful-links-section>
</useful-links>
<useful-links>
<useful-links-section title="Reddit">
[r/vuejs](https://www.reddit.com/r/vuejs/)
</useful-links-section>
</useful-links>
<useful-links>
<useful-links-section title="Spectrum">
[Vue.js](https://spectrum.chat/vue-js)
</useful-links-section>
</useful-links>
## Other Language Media
Not all of the Vue ecosystem around the world communicates in English. There are multiple other language groups on different platforms. You can find the most popular among them on [awesome-vue](https://github.com/vuejs/awesome-vue#community) repository.
================================================
FILE: docs/guide/ecosystem/boilerplates.md
================================================
# Boilerplates
Boilerplates are pre-configured projects, that are meant to give a good head start when building larger applications. They tend follow best practices for the technologies that they incorporate, with the better ones keeping a good, up to date documentation on how to use and extend them.
Bad part about boilerplates is that once you start developing on top of one, it is hard to keep track of its future updates, as you have to apply them manually.
## Summary (TLDR)
<useful-links>
<useful-links-section title="Large teams">
[Vue Enterprise Boilerplate](#vue-enterprise-boilerplate) - very popular, suitable for enterprise apps.
</useful-links-section>
<useful-links-section title="Desktop Apps">
- [NW.js + Vue-CLI](#nw-js-vue-cli)
- [Electron-Vue](#electron-vue)
</useful-links-section>
<useful-links-section title="Node rendered apps">
[Vue-Express](#vue-express)
</useful-links-section>
</useful-links>
## Vue Enterprise Boilerplate <badge text="Popular"/>
A very detailed and well made boilerplate by Vue Core team member Chris Fritz. It incorporates an opinionated structure, first class testing practices, generators to speed up common development tasks, globally auto registered components, scoped Vuex modules and more.
The project is very well documented, with detailed explanations for each section. It even comes with a preconfigured setup for VSCode, adding intellisense when importing and working with files.
<useful-links>
<useful-links-section title="Links">
[Vue Enterprise Boilerplate - Github](https://github.com/chrisvfritz/vue-enterprise-boilerplate)
</useful-links-section>
</useful-links>
## Vuesion
Vuesion is an actively maintained boilerplate for enterprise level, production-ready PWAs. It focuses on performance, development speed, and best practices.
The boilerplate is build on top of the idea of micro-services or a service-oriented-architecture.
It shows best practices for fetching async data, setting up i18n, persisting Vuex state on page refresh, Typescript support, Routing with data prefetching and more.
<useful-links>
<useful-links-section title="Links">
[Vuesion - Github](https://github.com/vuesion/vuesion)
</useful-links-section>
</useful-links>
## NW.js + Vue-CLI
Comes with the latest versions of NW.js, Vue-CLI, Vue, Vue-DevTools, Babel, ESLint, and Jest. Including 100% test coverage, and basic examples of interacting with the file system, OS, and node_modules directly from your component. Automated builds for each OS are set up via `npm run build` and are easily customized in the `package.json`.
This is repo is meant to be the "go to" option for building all desktop apps with Vue. So it avoids pushing any particular choices on to you. Particularly things easily added via Vue-CLI (like Vue-Router, Vuex, etc.). With the exception of testing being set up for Jest, and Linting being set up to ensure quality of the boilerplate itself. Both of which can be easily modified, ignored, or removed.
<useful-links>
<useful-links-section title="Links">
[NW.js + Vue-CLI - Github](https://github.com/nwutils/nw-vue-cli-example)
</useful-links-section>
</useful-links>
## Electron-Vue
This is an Electron & Vue.js quick start boilerplate that comes with vue-cli scaffolding. It has common Vue plugins pre-installed, electron-packager/electron-builder allowing the application to be bundled as an installable package, unit and e2e testing support, vue-devtools and more.
The aim of the project is to remove the need of manually setting up electron apps using Vue. Electron-vue takes advantage of vue-cli for scaffolding, webpack with vue-loader, electron-packager or electron-builder, and some of the most commonly used plugins like vue-router, vuex, and more.
<useful-links>
<useful-links-section title="Links">
[Electron-Vue - Github](https://github.com/SimulatedGREG/electron-vue)
</useful-links-section>
</useful-links>
## Vue-Express
Vue-Express is a full stack boilerplate project with VueJS, ExpressJS, MongoDB (MEVN). It is an up-to-date starter repo which contains important functions like user signup, login, oauth, profile and others.
The boilerplate incorporates popular tools like i18next, GraphQL with Apollo, NodeMailer on the server side with VueRouter, Vuex, Vue-form-generator, PassportJS, websockets and more on the client side.
<useful-links>
<useful-links-section title="Links">
[Vue-Express - Github](https://github.com/icebob/vue-express-mongo-boilerplate)
</useful-links-section>
</useful-links>
## Real World Vue.js Boilerplate
Real world application boilerplate, showcasing best practices for organising and structuring larger projects.
It incorporates an Http request class for implementing API calls with Auth and tokens refresh based on Axios, Data access layer, Response success and error wrapper, layout components, helper mixins and more.
<useful-links>
<useful-links-section title="Links">
[Beauty vuejs boilerplate - Github](https://github.com/zmts/beauty-vuejs-boilerplate)
</useful-links-section>
</useful-links>
## Vuexpresso
Vuexpresso is a skeleton app that eases the setup process when building applications with Express, Vue, Vuex, GraphQL, Webpack, MongoDB, Apollo.
The project incorporates Storybook for interactively testing UI components. It offers a preconfigures Vuex store and Vue Router, with Pug and Stylus as default preprocessors.
<useful-links>
<useful-links-section title="Links">
[Vuexpresso - Github](https://github.com/Ethaan/vuexpresso)
</useful-links-section>
</useful-links>
## Laravel Vue Boilerplate
This is a Laravel 5 powered boilerplate with a Single Page Application front-end architecture, using Vue.js, GraphQL, Bootstrap 4, TypeScript, Sass and Pug.
It drastically eases the process of setting up a Vue SPA with a Laravel API. It offers an admin CRUD interface written in RESTful and GraphQL. I18n support with sharing locale messages between Laravel and Vue, Authentication using JWT, WebSockets with Laravel Echo and Pusher, Unit testing Vue components with Jest and API tests using PHPUnit.
It is configured to run tests on Docker, GitLab CI (with continuous deploy), Travis CI, CircleCI, AppVeyor and VSTS CI on Windows, Linux and macOS.
<useful-links>
<useful-links-section title="Links">
[Laravel Vue Boilerplate - Github](https://github.com/alefesouza/laravel-vue-boilerplate)
</useful-links-section>
</useful-links>
## Laravel Bootstrap 4 Vue
This is a Laravel and Bootstrap 4 based starter kit with lite blogging feature, user account registration/management and full Vue Tabler Backend based on Laravel 5.7.
It incorporates Social authentication, login throttling and recaptcha, image optimization on upload and more.
Out of the box, the offered admin panel is a Vue SPA, and the front-end is a standard Laravel rendered website with support for Vue adding components.
<useful-links>
<useful-links-section title="Links">
[Laravel Bootstrap 4 Vue - Github](https://github.com/adr1enbe4udou1n/laravel-boilerplate)
</useful-links-section>
</useful-links>
## Hare - Vue Koa Nuxt.js
SSR application starter boilerplate based on Vue.js, Koa 2.x, Element-UI and Nuxt.js. Comes with front-end testing preconfigured using Ava, preconfigured Nuxt rendering with Koa, configured Vuex store and more.
<useful-links>
<useful-links-section title="Links">
[Hare - Github](https://github.com/clarkdo/hare)
</useful-links-section>
</useful-links>
## vue-hackernews-2.0
> HackerNews clone built with Vue 2.0 + vue-router + vuex, with server-side rendering.
Not a boilerplate, but a very well structured application, showing how to approach things like SSR, PWA, SFC, Animations and more in larger Vue based applications.
<useful-links>
<useful-links-section title="Links">
[vue-hackernews-2.0 - Github](https://github.com/vuejs/vue-hackernews-2.0)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/build-tools.md
================================================
# Build Tools
Modern web applications are often a mix of custom written modules and third party packages, written in various versions of languages, most of which not supported by older browsers.
To be used in both browser and sometimes in server context, the application needs to be transformed by a various tools like Babel, PostCSS, Sass, Typescript to name a few. Their number can vary widely depending on the applied technologies in the project.
Configuring all these tools, making them work across operating systems, and more importantly between each other is not a simple task. Luckily there are tools that ease this process, most of which are abstractions on top of other tools, making configuration and setup even simpler.
Below are some of the more popular ones, used by the Vue community to build both web applications and libraries.
## Vue CLI <badge text="popular"/>
Vue CLI is a sophisticated mix of tools for building modern Vue.js applications. Its the official Vue.js build tool, who's purpose is to free developers from having to configure complex build processes and instead focus on writing application code. It offers a quick and interactive project scaffolding with custom presets, with painless upgrade to the build process with future updates.
Developers can leverage features like ESLint, Babel, Unit and End-to-end Testing, PWA support, Instant Prototyping, HMR and more. It comes with a rich and extensive API, with an ever growing list of plugins, further extending its functionality.
Vue CLI built on top of [Webpack](./build-tools.md#webpack), making it ideal for large and complex web applications. Building libraries with it is possible, but may lead to bigger bundles, compared to a tool like [Rollup](./build-tools.md#rollup).
### Features
* Interactive project scaffolding
* Full Graphic User Interface for managing Vue projects
* Support for Typescript, Sass, Less, Stylus preprocessing.
* ESLint and Babel pre-configured
* Unit and End-to-end testing out of the box
* Rich api, offering great extendability
* Rich collection of both official and third party plugins, integrating first class tools.
<useful-links>
<useful-links-section title="Official">
* [Vue CLI Docs](https://cli.vuejs.org/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [The Vue.js CLI: learn how to use it](https://flaviocopes.com/vue-cli/)
* [Vue CLI 3 - Creating our Project - Vue Mastery](https://www.vuemastery.com/courses/real-world-vue-js/vue-cli/)
* [Getting Started With Vue CLI 3](https://codingthesmartway.com/getting-started-with-vue-cli-3/)
</useful-links-section>
</useful-links>
## Poi
Poi is bundler alternative to Vue CLI, that is also built on top of Webpack. It tries to make development and bundling applications with Webpack as easy as possible by providing a pre-configured environment for building web apps.
Compared to Vue CLI, which is meant to bundle mainly Vue applications, Poi is agnostic and can work with any JavaScript framework. Similar to Vue CLI, it comes with support of Vue files, style preprocessors like SASS, Less and Stylus, JSX templating, asset extraction and minification, HMR support, all with little to no configuration.
As with Vue CLI, Poi leans more towards building applications than libraries.
### Features
* Out of box support for JS, CSS, File assets and more.
* Framework-agnostic, with support for JSX, Vue and more with no configs.
* Great extensibility via configuration api.
* Fits most web apps and npm libraries.
* Great development experience.
* Plugin support for maximum extendability.
<useful-links>
<useful-links-section title="Official">
* [Poi Docs](https://poi.js.org/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Scaffold a Vue.js app with Poi](https://alligator.io/vuejs/vue-scaffold-poi/)
* [Experience in using Poi.js and Bili from Egoist](https://medium.com/vuejs-id/experience-in-using-poi-js-and-bili-from-egoist-efd78aa8323a)
* [Make Webpack Easy with Poi](https://egghead.io/courses/make-webpack-easy-with-poi) <badge>Paid</badge>
</useful-links-section>
</useful-links>
## Bili
Bili is a build tool on top of Rollup, that is meant to make bundling JavaScript libraries easier, without getting in the way.
Its zero-config strategy, applies sensible defaults for the most popular use cases, allowing library authors to focus on developing their packages, and not the build process.
The tool offers both a command line and Node.js API, so developers are free to choose depending on their needs. It has built in ES2015+ transpilation via Buble and Babel, Typescript support, style extraction with pre and post processing for Sass, Less and Stylus along support for CSS Modules.
### Features
* Fast, zero-config by default.
* Using Rollup under the hood.
* Automatically transforms JS files using Buble/Babel/TypeScript.
* Built-in support for CSS Sass Stylus Less CSS modules.
* Ridiculously easy to use Rollup plugins if you want.
* Friendly error logging experience.
* Written in TypeScript, automatically generated API docs.
<useful-links>
<useful-links-section title="Official">
* [Bili Docs](https://bili.egoist.sh/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Bundle Vue library with Bili](https://medium.com/@sox/bundle-vue-library-with-bili-65de446365a8)
* [Experience in using Poi.js and Bili from Egoist](https://medium.com/vuejs-id/experience-in-using-poi-js-and-bili-from-egoist-efd78aa8323a)
</useful-links-section>
</useful-links>
# Bundlers
Bundlers are complex tools that take both small and large applications, often made out of multiple packages and sub modules, transform them into a format, that is ready to work in the Browser, Node.js or both.
Depending on the intended use case, each bundler has its strengths and weaknesses, which we will outline in the list below.
## Webpack
Webpack is the most popular tool for bundling complex web applications. It boasts a widely configurable API, an enormous plugin ecosystem, constantly growing community and more. It is used by the top three JavaScript frameworks as a bundler of choice for applications made with them.
Webpack can import JavaScript files along side assets like images and styles, building a dependency graph which maps modules between each other, generating one or more application bundles.
<useful-links>
<useful-links-section title="Official">
* [Official Webpack Docs](https://webpack.js.org/)
* [Webpack Academy](https://webpack.academy/) <badge>Freemium</badge>
</useful-links-section>
<useful-links-section title="Tutorials">
* [Setting up Webpack manually for Vue](https://vue-loader.vuejs.org/guide/)
* [Vue.js and Webpack 4 From Scratch, Part 1](https://itnext.io/vuejs-and-webpack-4-from-scratch-part-1-94c9c28a534a)
* [Webpack for Everyone](https://laracasts.com/series/webpack-for-everyone)
</useful-links-section>
</useful-links>
## Rollup
Rollup is a module bundler, that is more catered towards building libraries, rather than applications. Its purpose is to compile small pieces of code, preferably ES Modules, into larger and more complex applications and libraries. It works best with the ES6 version of JavaScript modules, as it offers a superior API, transforming older formats like CommonJS and AMD to it via plugins.
The bundler is used to package some of the most popular JavaScript tools and frameworks, including Vue itself.
Rollup has both a command line and Node.js based API, Babel and Buble support, Tree-Shaking (removes unused code), a big list of configuration options, most of which have defaults that are suitable for the majority of libraries.
<useful-links>
<useful-links-section title="Official">
* [Rollup Docs](https://rollupjs.org/guide/en)
</useful-links-section>
<useful-links-section title="Tutorials">
* [How to write and build JS libraries in 2018](https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953)
</useful-links-section>
</useful-links>
## Parcel
Parcel is a fast, zero configuration web application bundler that aims to bundle most complex applications without any configuration from the developers side. It handles JavaScript, HTML, Assets, Typescript and ESModules seamlessly, transforming and transpiling to format supported by the Browser, all out of the box.
This is a tool, similar to Webpack as it can handle all kinds of file types, building a dependency graph between all of them, returning one or more application bundles. Where it shines is its zero config approach and sheer speed, which were very noticeable in Webpack 3 and below. Webpack 4 offers a similar simplified configuration and major speed improvements.
<useful-links>
<useful-links-section title="Official">
* [Parcel with Vue](https://parceljs.org/vue.html)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Building Vue.js Apps with Parcel](https://alligator.io/vuejs/vue-parceljs/)
* [Using Parcel In A Vue.js App](https://scotch.io/tutorials/using-parcel-in-a-vuejs-app)
</useful-links-section>
</useful-links>
## Brunch
Is a minimalistic asset build tool, which boasts a near zero-config build process. It offers good build speeds, plugin support, live reloading and project scaffolding via official and community written skeletons.
Brunch was made to replace task runners like Gulp or Grunt, before Webpack and Rollup had gained so much traction.
<useful-links>
<useful-links-section title="Tutorials">
* [Vue.js + Brunch: The Webpack Alternative You've Been Hungry For](https://vuejsdevelopers.com/2017/08/20/vue-js-brunch/)
* [Getting Started with Brunch](https://scotch.io/tutorials/getting-started-with-brunch-the-ultra-fast-simple-config-build-tool)
* [What is Brunch](https://github.com/brunch/brunch-guide/blob/master/content/en/chapter01-whats-brunch.md)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/client-server-communication.md
================================================
# Client Server Communication
When working with SPA's it is very common to fetch data from remote services. This allows for dynamic content to be displayed depending on certain applied criteria. Fetching of said data can be done in many ways, some of which are described below.
## Ajax Requests
Ajax requests to REST API's are the most common way of fetching data asynchronously from remote services. Requests are sent to a server, where data is processed. In the meantime, depending on the implementation, we can either have a callback based approach or the newer Promise based one, where we can wait until the process either succeeds or errors out.
## Summary (TLDR)
<useful-links>
<useful-links-section title="Ajax">
[Axios](#axios)
</useful-links-section>
<useful-links-section title="Complex Queries">
[Vue Apollo](#vue-apollo)
</useful-links-section>
<useful-links-section title="Realtime Communication">
[Pusher](#pusher)
</useful-links-section>
<useful-links-section title="Realtime Serveless DB">
[Firebase](#firebase)
</useful-links-section>
</useful-links>
### Axios <badge text="popular"/>
Axios is a famous library for performing async requests. It has a very nice and easy to use API, supports Promises, more advanced features like interceptors, generating Axios instances, adding external plugins and more.
You can directly import Axios from NPM and use it in your components, without the need to install a dedicated plugin.
However another pattern you are more likely to implement is to write a "client" or a "service" where you create an Axios instance and use that instead of just importing axios everywhere.
Not only does this make your application easier to test, through the use of mocking/stubbing, but it also allows you to centralise HTTP settings (Base URL and port for instance).
Furthermore, it decouples your components from the internals of HTTP operations and REST APIs.
<useful-links>
<useful-links-section title="Tutorials">
* [Vue.js REST API Consumption with Axios](https://alligator.io/vuejs/rest-api-axios/)
* [Single Page Apps with Vue.js and Flask: AJAX Integration](https://stackabuse.com/single-page-apps-with-vue-js-and-flask-ajax-integration/)
</useful-links-section>
</useful-links>
### Fetch
Fetch is a newer Promise based API that is integrated into [modern Browsers](https://caniuse.com/#search=fetch).
> Fetch makes it easier to make web requests and handle responses than with the older XMLHttpRequest, which often requires additional logic (for example, for handling redirects). - [Working with the Fetch API - Google - Progressive Web Apps Training ](https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api)
You can also import a library like `isomorphic-fetch` for using fetch in Node.js environment, where it is not available.
To use it with Vue, you don't need plugins, you can just import `fetch` and start working.
<useful-links>
<useful-links-section title="Tutorials">
* [Let's build Type Ahead Component with VueJS 2 and Fetch API](https://scotch.io/@bedakb/lets-build-type-ahead-component-with-vuejs-2-and-fetch-api)
* [Understanding the Fetch API](https://flaviocopes.com/fetch-api/)
</useful-links-section>
</useful-links>
## GraphQL
::: contribute
:::
- What is GraphQL
- When does it make sense to use it
- Links to tutorials
### Vue Apollo <badge text="rising star"/>
::: contribute
:::
- What is Apollo
- Common use cases
- Why use with Vue
- Links to tutorials
- Vue packages
## WebSockets
Unlike HTTP requests, which are one way communication from client to server, WebSockets allow for a realtime two way communication. This allows for implementing notifications, dashboards, chats, realtime interactions and more.
<useful-links>
<useful-links-section title="Tutorials">
* [What are WebSockets?](https://pusher.com/websockets)
* [An Introduction to WebSockets](https://blog.teamtreehouse.com/an-introduction-to-websockets)
</useful-links-section>
</useful-links>
### Pusher <badge text="popular"/>
Pusher is service which offers an abstraction over Websockets, allowing users to use a simplified API to subscribe to realtime notifications. It implements the notion of channels and events, where a single channel can have multiple event types.
Pusher can be used for chats, games, location sharing and is most commonly used with frameworks like Laravel, when realtime communication with client is needed.
<useful-links>
<useful-links-section title="Tutorials">
* [Create a realtime prototype feedback app using VueJS and Pusher](https://dev.to/neo/create-a-realtime-prototype-feedback-app-using-vuejs-and-pusher--5g92)
* [Pusher + Vue + Laravel](https://medium.com/@danielalvidrez/laravel-pusher-lets-do-it-96bd23e76a7e)
</useful-links-section>
</useful-links>
### Firebase
> Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline. - Firebase Docs
Along with database, they offer authentication, static hosting, data storage and more. Thanks to their server-side libraries and REST api's you can connect Firebase to your existing backend. You can build realtime chats, dashboards, cross device notifications and much more.
Implementing Firebase into your Vue app directly with their SDK can be a bit of a hassle as you need to keep track of a lot of things, bind documents, etc. Luckily there is the official [Vuefire](https://github.com/vuejs/vuefire) package that makes it a lot easier.
<useful-links>
<useful-links-section title="Tutorials">
* [Building a Vue app with Firebase authentication ](https://medium.com/@anas.mammeri/vue-2-firebase-how-to-build-a-vue-app-with-firebase-authentication-system-in-15-minutes-fdce6f289c3c)
* [Building A Real-Time Chat Application With Vue.js and Firebase](https://codingthesmartway.com/building-a-real-time-chat-application-with-vue-js-and-firebase-part-1/)
* [Full Stack Vue.js with Firestore](https://medium.com/vue-mastery/full-stack-vue-js-with-firestore-62e2fe2ec1f3)
* [Vue.js Firebase Integration with VueFire](https://alligator.io/vuejs/vuefire-firebase/)
</useful-links-section>
</useful-links>
### Feathers
::: contribute
:::
- What is Feathers
- Common usages
- Why use with Vue
- Popular Vue Packages
- Tutorials
### Meteor
::: contribute
:::
- What is Meteor
- Common usages
- Why use with Vue
- Popular Vue Packages
- Tutorials
### SocketIO
::: contribute
:::
- What is SocketIO
- Common usages
- Why use with Vue
- Popular Vue Packages
- Tutorials
[Integrating Vue.js and Socket.io](https://alligator.io/vuejs/vue-socketio/)
## SSE - Server Sent Events
::: contribute
:::
- What are SSE
- Common usages
- Why use with Vue
- Popular Vue Packages
- tutorials
https://github.com/tserkov/vue-sse#readme
## MQTT
::: contribute
:::
> MQTT is a machine-to-machine (M2M)/"Internet of Things" connectivity protocol. It was designed as an extremely lightweight publish/subscribe messaging transport. - MQTT.org
You can use MQTT to transfer small pieces of data in realtime between devices. It is most commonly used to send sensor readings from low processor devices.
<useful-links>
<useful-links-section title="Tutorials">
* [Vue-Mqtt](https://github.com/nik-zp/vue-mqtt)
* [Vue-Mqtt-Example](https://github.com/nik-zp/Vue-Mqtt-Example)
* [Connecting Nuxt.js to MQTT](https://imantabrizian.me/posts/2017/11/nuxt-mqtt)
* [Real-time visualization of high-frequency streams](https://itnext.io/javascript-real-time-visualization-of-high-frequency-streams-d6533c774794)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/contributing.md
================================================
# Contributing
## Contributing
<useful-links>
<useful-links-section title="Official links">
- [Join the Vue.js Community!](https://v3.vuejs.org/community/join.html)
- [Vue.js Contributing Guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md)
</useful-links-section>
</useful-links>
### How to write your own library
### Why NOT to write your own library
::: contribute
:::
================================================
FILE: docs/guide/ecosystem/desktop-apps.md
================================================
# Desktop Apps
Vue is not limited to just developing web and [native mobile](./mobile-apps.md) applications, it allows building desktop apps as well. Here are some important reasons why one would choose Vue over a native language solution:
- **cross-platform**: all applications are developed with JavaScript, and can be packaged for Windows/MacOS/Linux;
- **easy to build**: frameworks allow you to simply develop a web application and then 'convert' it to a desktop one using a packager;
- **community**: if you maintain an open-source desktop project, you will more likely find contributors for it.
There are however some downsides, common for all JavaScript-powered desktop applications. They tend to have big package size (at least 30 MB) and are know to have heavy RAM usage.
There are mainly two ways to build a desktop application with Vue: HTML+CSS-based solutions or native GUI. First one is represented by Electron and NW.js, and the second is Vuido.
## Electron
[Electron](https://electronjs.org/) is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining [Chromium](http://www.chromium.org/) and [Node.js](https://nodejs.org/en/) into a single runtime and apps can be packaged for Mac, Windows, and Linux
Electron is by far the most popular library for writing JavaScript desktop applications today. Some of the more well-known apps are [Slack](https://slack.com/) and [Discord](https://discordapp.com/) messengers, [Atom](https://atom.io/) code editor and [Visual Studio Code](https://code.visualstudio.com/) IDE.
::: tip Pros
- easy to start with
- good development documentation
- no need to change existing source code
- has [Vue CLI plugin](https://github.com/nklayman/vue-cli-plugin-electron-builder)
- mature developer community
:::
::: danger Cons
- big package size
- high memory usage
- unprotected source code in package
:::
<useful-links>
<useful-links-section title="Tutorials">
- [Vue.js & Electron: The easy way](https://medium.com/@mikeal/vue-js-electron-the-easy-way-adc3ca09234a)
- [Building a Desktop App with Vue: Electron](https://dev.to/vuevixens/building-a-desktop-app-with-vue-electron-3pl)
</useful-links-section>
</useful-links>
## NW.js
[NW.js](https://nwjs.io/) (previously known as node-webkit) is a framework for building desktop applications with HTML, CSS, and JavaScript. Similar to [Electron](#electron), it is based on Chromium and Node.js. NW.js lets you call Node.js code and modules directly from browser, along with using Web technologies in your app. Further, you can easily package a web application to a native application.
::: tip Pros
- easy to start with
- no need to change an existing source code
- compiling to protected binaries
- has [Vue CLI plugin](https://github.com/NataliaTepluhina/vue-cli-plugin-nwjs)
:::
::: danger Cons
- big package size
- high memory usage
- significantly less used than Electron
:::
<useful-links>
<useful-links-section title="Boilerplate">
- [NW.js + Vue-CLI](https://github.com/nwutils/nw-vue-cli-example)
</useful-links-section>
<useful-links-section title="Tutorials">
- [Building a Desktop App with Vue: NW.js](https://dev.to/vuevixens/building-a-desktop-app-with-vue-nwjs-1f9e)
- [Reducing app distribution size in NW.js](https://dev.to/thejaredwilcurt/reducing-app-distribution-size-in-nwjs-3d5f)
</useful-links-section>
</useful-links>
## Electron VS NW.js
Electron and NW.js share many features: they are both built on top of Chromium and Node.js and use HTML, CSS and JS for building desktop apps. They also have some notable differences:
- In NW.js the main entry point of an application is a web page or a JS script. You specify this entry via `package.json` `main` property. In Electron, the entry point is a JavaScript script. Instead of providing a URL directly, you manually create a browser window and load an HTML file using the API.
- During the build process NW.js builds the whole Chromium; Electron uses [libchromiumcontent](https://github.com/electron/libchromiumcontent) to access Chromium's Content API
- NW.js has [built-in support](http://docs.nwjs.io/en/latest/For%20Users/Advanced/Protect%20JavaScript%20Source%20Code/) for compiling your source code to protected binaries. Electron is packaging its applications with [asar](https://github.com/electron/asar), which contains the applications' unprotected source code.
## Quasar Framework
[Quasar Framework](https://quasar.dev) is a framework which allows for cross-platform application development. Design your apps with a large library of VueJS components, then use Quasar's powerful yet simple to use CLI to automatically build your app for the Desktop via Electron. If you are looking to do more with your code than only Electron apps, then Quasar is an excellent solution for your cross-platform application ideas.
<useful-links>
<useful-links-section title="Official">
* [Quasar repositories](https://github.com/quasarframework)
* [Quasar documentation](https://quasar.dev)
* [Quasar Electron documentation](https://quasar.dev/quasar-cli/developing-electron-apps/introduction)
* [Quasar chat on Discord](https://chat.quasar.dev)
* [Forum](https://forum.quasar.dev)
</useful-links-section>
</useful-links>
## Vuido
[Vuido](https://vuido.mimec.org/) is a framework for creating native desktop applications based on Vue.js. Applications using Vuido can run on Windows, OS X and Linux, using native GUI components.
Under the hood, Vuido uses the [libui](https://github.com/andlabs/libui) library which provides native GUI components for each desktop platform, and the [libui-node](https://github.com/parro-it/libui-node) bindings for Node.js.
The core difference between Vuido and Electron or NW.js is that you're not going to use HTML tags or CSS styles with Vuido, you are limited to a predefined set of UI components, that the OS platforms provide.
::: tip Pros
- easy to build
- provides small package size compared to Electron or NW.js apps
- well-documented
:::
::: danger Cons
- appearance is limited to OS native GUI components
- doesn't have a Vue CLI plugin, only Vue CLI 2 boilerplate
:::
<useful-links>
<useful-links-section title="Tutorials">
- [Vue CLI 2 Vuido boilerplate](https://github.com/mimecorg/vuido-webpack-template)
- [Native desktop applications using Vue.js](https://codeburst.io/native-desktop-applications-using-vue-js-964e841e3c1d)
- [Building a Desktop App with Vue: Vuido](https://dev.to/vuevixens/building-a-desktop-app-with-vue-vuido-490n)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/documentation.md
================================================
# Documentation Platforms
Documentation is a very important part of any software, especially if it is going to be used by more than one developer.
There are a few ways to document software, one is directly inside the code via comments and type declarations, while the other is using external documentation sources, from files (usually .md) inside project to full blown websites.
## Documentation Websites
When choosing a platform to write your docs on, think about your priorities and preferences.
- Do you want to write in markdown files or do you prefer to write html webpages?
- Do you want a custom designed website or a generic one will do just fine?
- Is SEO important to you?
- Do you mind a pre-build step or do you want everything to run as is?
- Do you need custom features, specific for your documentation purposes?
- Where do you plan to host your documentation? Can you use static site hosting or do you need a server?
## Summary (TLDR)
<useful-links>
<useful-links-section title="Statically Generated">
* [Vuepress](#vuepress)
</useful-links-section>
<useful-links-section title="No build step">
* [Docute](#docute)
</useful-links-section>
<useful-links-section title="Live component examples">
* [Storybook](#storybook)
</useful-links-section>
<useful-links-section title="Automated workbench">
* [Vue Styleguidist](#vue-styleguidist)
</useful-links-section>
</useful-links>
### Vuepress <badge text="popular"/>
[Vuepress](http://vuepress.vuejs.org/) is a Vue-powered static site generator, that by default is optimized for technical documentation.
Vuepress websites are actually Vue based SPA's that use Vue Router and Webpack, with content built from plain markdown files. During the build process, a static server side rendered version of website is generated, ensuring great loading performance and improved SEO, compared to a traditional SPA.
So to answer the questions above:
- You will write in `.md` files, but have the option to use actual Vue components inside them. This gives it an enormous advantage to other similar platforms.
- Vuepress comes with one documentation optimized theme by default, but allows providing custom ones.
- Being Server Side Rendered, all pages are actually static html files, so search crawlers can scan them easily, plus pages load super fast.
- As the markdown files need to be transformed to html, a pre-build step is required. One can do it manually, use CI or deploy to a hosting with a build step, like Netlify.
- As Vupress offers the full power of Vue.js, you can do pretty much any custom component you need.
- Vupress websites, when rendered, are just static html files, so any static file hosting will do, which are cheap, some of them even free. Check our [Hosting](./hosting.md#static-hosting) page for more information on hosting providers.
<useful-links>
<useful-links-section title="Official">
[Official Website](https://vuepress.vuejs.org/guide/#features)
</useful-links-section>
<useful-links-section title="Internal Pages">
[Hosting](./hosting.md#static-hosting)
</useful-links-section>
</useful-links>
### Docute
[Docute](https://docute.org/) is another Vue-powered Single Page Application.
In a nutshell, Docute fetches Markdown files and renders them on the fly in the browser, serving a fully working SPA. Because there is no build process, users can preview and deploy changes immediately, without any pre-build steps.
Because it is built with Vue, components can be defined and used inside the markdown files, which as Vuepress, gives a lot of flexibility and customisation.
Here are the answers from the above questions:
- Pages are written in `.md` files, along with the option of using Vue components inside them.
- It comes with a predefined template, which allows some customisation, with currently no other themes available.
- As a normal SPA, not an SSR website, SEO might not be as good in some cases.
- There is no pre-build step. Markdown files are fetched and rendered in the browser.
- It supports plugins as well as custom Vue Components, making customisation quite possible.
- Docute websites can be hosted on static file hosting services, same as Vuepress.
<useful-links>
<useful-links-section title="Official">
* [Official Website](https://docute.org/).
</useful-links-section>
</useful-links>
## Other Website Doc Platforms
Below is a list of popular documentation generators, that are not connected to Vue.
<useful-links>
<useful-links-section title="Similar">
- [Docsify](https://docsify.js.org/#/) - native javascript alternative to Docute
- [Jekyll](https://jekyllrb.com/)
- [Hexo](https://hexo.io/)
- [GitBook](https://www.gitbook.com/)
- [Docusaurus](https://github.com/facebook/docusaurus)
- [Docz](https://www.docz.site/)
</useful-links-section>
</useful-links>
## Component Workbenches
A workbench is a development environment for UI components. It allows developers to setup interactive examples of how a UI component can be used. One can setup a live demo of a Vue component by passing different props to it. Perfect to show your designer or for you to test the result of your work
Workbenches are very powerful when working in big teams with lots of components. They allow other developers to discover how components work by tweaking them. Even better, these showcases can turn into static websites.
### Storybook <badge text="popular"/>
The most popular workbench is [storybook](https://storybook.js.org/docs/guides/guide-vue/).
In storybook, you write demo components (stories) in JavaScript or TypeScript. There can be mutiple stories for each component, but each story will have its own page.
Vue.js is a first class citizen in storybook, which means it has great integration and support. Stories are written in JavaScript and developed through a Webpack Dev Server. Existing Webpack configurations for your project will continue to work with storybook.
#### Documentation Style
Storybook uses a separate JavaScript file to host documentation for a component.
```javascript
// my-button.story.js
import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import MyButton from './Button.vue';
storiesOf('Button', module)
.add('with text', () => '<my-button>with text</my-button>')
.add('with emoji', () => '<my-button>😀 😎 👍 💯</my-button>')
.add('as a component', () => ({
components: { MyButton },
template: '<my-button :rounded="true">rounded</my-button>'
}));
```
::: tip Pros
- The community is big and active
- Lots of mature [plugins](#essential-plugins)
- Visual testing
- Sketch symbol exports
- Accessibility checks
- Easily adopted by front-end developers (Examples are written in JavaScript/TypeScript)
:::
::: danger Cons
- Bare bones, without plugins out of the box (no prop detection, no code samples, no styling)
- Input and output formats not practical for long descriptions
- Stories are string litterals, so there is no syntax highlighting.
- Only one "story" per page
- Need to create a separate `webpack.config.js` file
:::
<useful-links>
<useful-links-section title="Essential Plugins">
- [@storybook/addon-a11y](https://github.com/storybooks/storybook/tree/next/addons/a11y) checks accessibility properties
- [@storybook/addon-knobs](https://github.com/storybooks/storybook) add controls to change usage of your component
- [@storybook/addon-storysource](https://github.com/storybooks/storybook) shows the source code of the template used for the story
- [storybook-addon-vue-info](https://github.com/pocka/storybook-addon-vue-info) detects props info
- [storybook-vue-router](https://github.com/gvaldambrini/storybook-router) add routes to your stories
</useful-links-section>
</useful-links>
### Vue Styleguidist <badge text="rising star"/>
[Vue-styleguidist](https://github.com/vue-styleguidist/vue-styleguidist) is a port of [react-styleguidist](https://github.com/styleguidist/react-styleguidist) for vue components.
You are building a Design System. You want a site to showcase your components, this should be your first choice.
#### Documentation Style
Styleguidist uses standard JSDoc comments to extract useful meta data from components.
```html
<template>
<form :name="name">
{{name}}
<input type="text">
<button @click="clear">clear</button>
</form>
</template>
<script>
/**
* This is a description of the component
*/
export default {
name: 'MyComponent',
props: {
/**
* The name of the form, up to 8 characters
*/
name: {
type: [String, Number],
required: true,
validator () {}
}
},
methods: {
/**
* Used to manually clear the form
* @public
*/
clear () {
/**
* Fire when the form is cleared
* @property The argument is a boolean value representing xxx
*/
this.$emit('onclear', true)
}
}
}
</script>
<docs>
Here you can use markdown to show uses of the above component.
## The form component can be set with a nane
Here give a reason for using the component. The code samples are going to be rendered automatically with the current comment.
'''vue
<MyComponent name='My nice form'>
'''
</docs>
```
::: tip Pros
- Detects props, events, methods and slots automatically
- Documentation is done inside the components using standard JSDoc
- Markdown documentation can live inside custom `<docs>` block of a Single File Component
- Displays a live editor to try components even on the static website
- Meant for design system creation and showcase (powers vue-design-system)
- Highly customizable HTML output template
- Multiple component examples can be shown in the same markdown page
- Components can be grouped by sections
:::
::: danger Cons
- Generated output is currently limited to HTML
- JSDoc can be verbose
- The tool is built in React. To customize the template, you will need to use React.
:::
<useful-links>
<useful-links-section title="Official">
- [Documentation](https://vue-styleguidist.github.io/)
- [Github](https://github.com/vue-styleguidist/vue-styleguidist)
- [Discord Channel](https://discordapp.com/channels/325477692906536972/538786416092512278)
- [Live Example](http://rafaelescala.com/vue-styleguide/)
</useful-links-section>
</useful-links>
### Vuese
[Vuese](https://github.com/vuese/vuese) is documentation oriented. It sacrifices interactivity to be more integrable.
If you have to generate your doc to integrate it in a bigger one, this is the workbench that you want. Without sacrificing the Hot Module Reload, it generates a good looking static doc.
#### Documentation Style
Vuese uses its own documentation format, more compact than JSDoc.
```javascript
// This is a description of the component
export default {
name: 'MyComponent',
props: {
// The name of the form, up to 8 characters
name: {
type: [String, Number],
required: true,
validator () {}
}
},
methods: {
// @vuese
// Used to manually clear the form
clear () {
// Fire when the form is cleared
// @arg The argument is a boolean value representing xxx
this.$emit('onclear', true)
}
}
}
```
::: tip Pros
- Detects props, events, methods and slots automatically
- Compact documentation in components
- Vuepress default output
- Configurable docute or markdown outputs
- Entirely made with VueJs
:::
::: danger Cons
- Static code samples
- Not fully compliant with all Vue.js specs. Does not support (yet):
- Functional component template props
- Slots added to a render function
- Decorator component names like `@Component({name:'MyComponent'})`
:::
<useful-links>
<useful-links-section title="Official">
- [Github](https://github.com/vuese/vuese)
</useful-links-section>
<useful-links-section title="Tutorials">
- [Live Example](https://buptsteve.github.io/markdown-it-vuese/example/demo.html#props)
</useful-links-section>
</useful-links>
### Vue Design System
Vue design system is a combination of [vue-styleguidist](#vue-styleguidist) and [salesforce-ux/theo](https://github.com/salesforce-ux/theo). It goes by *vueds* for short. Vueds is a boilerplate for making your own design systems. It is highly opinionated. If you are starting a new project or if you don't want to think about your naming conventions simply clone the project.
[vueds documentation](https://github.com/viljamis/vue-design-system/wiki) is a great read. Even if you are not going to use it directly, you will love to learn about design systems and how to use them.
<useful-links>
<useful-links-section title="Official">
- [Official website](https://vueds.com/)
- [Github](https://github.com/viljamis/vue-design-system)
- [Live Example](https://vueds.com/example/)
</useful-links-section>
</useful-links>
## Documentation Generators
Automatic documentation generators scan your files and output a structured format. Some create markdown, some create html pages.
### Vuedoc
Vuedoc is extracting JSDoc to write documentation in a markdown file.
<useful-links>
<useful-links-section title="Links">
- [Gitlab](https://gitlab.com/vuedoc/md)
- [JSDoc3 plugin](https://github.com/ccqgithub/jsdoc-vuedoc) Generate JSDoc3 powered documentations using vuedoc.
</useful-links-section>
</useful-links>
### JSDoc Vuejs
This writes an html page by extracting the JSDoc from your component. Internally, it runs on JSDoc3. It supports 4 different output formats:
<useful-links>
<useful-links-section title="Official">
- [Github](https://github.com/Kocal/jsdoc-vuejs)
</useful-links-section>
<useful-links-section title="Formats">
- Default: made by Kocal author of jsdoc-vuejs
- [Docstrap](https://github.com/docstrap/docstrap)
- [Minami](https://github.com/nijikokun/minami)
- [Tui](https://nhnent.github.io/tui.jsdoc-template/latest/)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/editors-and-tools.md
================================================
# Editors and Tools
Choosing a proper tool for the job is always hard. Thankfully Vue's popularity has grown enough for many major code editors and tools to offer very good support for its syntax specifics and `.vue` files.
## Editors
You don't need a special editor to develop Vue applications. Vue apps are written in plain JavaScript, any code editor would do the job. However if you want to benefit from more advanced features like syntax highlighting, especially in `.vue` files, code completion, snippets and hints, then you will need an editor with dedicated Vue support.
The list below shows the top most popular choices with more details later on why you would chose one over the other.
### Best Code Editors (TLDR)
<useful-links>
<useful-links-section title="Editors">
- [VSCode](#vscode) - fast, versatile, plugin rich, very popular, **free**.
- [WebStorm](#webstorm-phpstorm-jetbrains-ides) - fully featured IDE, heavy, **premium**.
- [CodeSandbox](#codesandbox) - in-browser, cloud based, **free**.
</useful-links-section>
</useful-links>
### VSCode <badge text="Hottest"/>
There is no doubt that VSCode has gained an enormous adoption in the development scene and for good reasons. It is not only highly customisable, with a large selection of plugins, but it also has support for a wide range of languages, and it is also **free**.
Out of the box, VSCode comes pretty bare bones with all the basic JS, TS and HTML editing tools, so to enable proper Vue support, you will need to install a plugin called [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). It gives you smart code completion and suggestions, syntax highlighting, type hinting, linting, code snippets and much more. It supports TS, JS, Stylus pretty well, with others to follow soon. You may also install a set of snippets to reduce typing the same boilerplate.
Vetur is being developed closely with VSCode and Vue core teams, to ensure maximum parity.
<useful-links>
<useful-links-section title="Useful Links">
- [Official Website](https://code.visualstudio.com/)
- [Vetur Plugin](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - enable improved Vue support
- [Vue VSCode Extension Pack](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack) - collection of useful plugins for Vue app development
* [Video: How to setup VSCode](https://www.vuemastery.com/courses/real-world-vue-js/optimizing-your-editor/) - Awesome video showing how to setup VSCode by Vue Mastery. Read the [ESLint](#eslint) and [Prettier](#prettier) sections to understand more about the applied settings.
</useful-links-section>
</useful-links>
### WebStorm/PhpStorm (JetBrains IDEs)
If you need a fully featured IDE with all the bells and whistles, not just a code editor, WebStorm is a serious contender. Not free, JetBrains products like WebStorm and PhpStorm are feature rich IDEs, offering everything a web developer may need for their daily work. They have a free trial, free student licenses, as well as a free open beta testing program, which allows users to test JetBrains products early on.
To enable Vue support you will need to install the official, free Vue.js plugin from the plugins menu. It will give you `.vue` file support with highlighting, `template` and `script` tag code completion, linting, component hinting, prop completion, type hinting, refactoring support and much more.
As a fully featured IDE, WebStorm provides greater refactoring capabilities, improved code completion, hinting and highlighting, but at a cost of speed. It is heavy and can get choppy if you open too many files or projects at the same time.
### CodeSandbox <badge text="Rising Star"/>
CodeSandbox is the only online, cloud based code editor, that supports Vue's SFC format, among many other frameworks, popular client apps and server setups. Vue projects are built with Vue CLI, giving you a well known folder structure to extend upon.
Based on VSCode, CodeSandbox has a similar look and feel. When you create a Vue project, you will benefit from code completion, hinting, syntax highlighting and more. It even allows you to connect a sandbox to a Github repo and commit to it on each change. Apart from Vue CLI, they have templates for [Vuepress](../ecosystem/documentation.md#vuepress) and [Nuxt](../ecosystem/nuxt.md), just to name a few.
CodeSandbox has a very generous freemium policy with 50 active sandboxes (projects) absolutely free.
<useful-links>
<useful-links-section title="Useful Links">
- [Official Website](https://codesandbox.io)
</useful-links-section>
</useful-links>
### Atom
An amazing, free, open-source code editor created by GitHub with plenty of extensions and superb user experience. With the available plugins, it supports a wide range of languages and features, including ones dedicated to Vue: smart code completion/suggestions, snippets, syntax highlighting, linting and formatting with both eslint and prettier, that works in template, script and style parts of the Vue SFC.
On top of that, Atom has great integration with GitHub when it comes to managing commits, PRs, reviewing changes and can be further extended with additional plugins. Some say its the most fashionable and good looking editor out there and the code completion is at the same time very smart (thanks to Tern.js), but also completely unintrusive. You’re the developer, you got this!
Some say, that it’s a bit slow, but that’s just a way of hinting that you should refactor your huge components.
<useful-links>
<useful-links-section title="Useful Links">
- [ternjs](https://github.com/tststs/atom-ternjs)
- [language-vue](https://github.com/hedefalk/atom-vue)
- [ide-vue](https://github.com/rwatts3/atom-ide-vue)
- [vue-fmt](https://github.com/voodeng/vue-fmt)
</useful-links-section>
</useful-links>
### SublimeText
Another very popular editor, coming close to VSCode. It is well known for its speed and lightness. Sublime has a very big library of free plugins, extensions and themes, enabling far more features, than was intended in the beginning.
Sublime has a fair Vue support, with syntax highlighting in `.vue` files coming from an official plugin from the Vue core team. Unfortunately the feature list pretty much stops there. You can download snippets as well.
If you have to choose a light editor for Vue, we recommend VSCode.
<useful-links>
<useful-links-section title="Useful Links">
- [Vue Syntax Highlight](https://github.com/vuejs/vue-syntax-highlight)
- [Vue.js Snippets](https://packagecontrol.io/packages/Vuejs%20Snippets)
</useful-links-section>
</useful-links>
## Tools
No setup is complete without a good linter or formatter. Some editors offer their own implementations, others offer good integration with already existing tools, and third offer both. Below we will show the most popular tools, why one should use them, and how they integrate with the above editors, and with each other.
### ESLint
ESLint is a JavaScript linting utility, designed to find problematic patterns or code that does not adhere to certain style guidelines, by utilizing static analysis patterns. Its popularity has spread like wildfire and is the de facto linting tool for many of the popular frameworks like Vue and React.
[Vue CLI](../ecosystem/build-tools.md#vue-cli) offers a fully setup ESLint configuration, thanks to the incredible work by the people behind the [Vue ESLint](https://eslint.vuejs.org/) project. It is constantly being improved and worked on, offering a large set of rules, from basic Vue style guidelines, to very strict ones, keeping code as close to the [Official Vue Style Guide](https://vuejs.org/v2/style-guide/) as possible. It also allows you to pick between Standard or Airbnb code style rules.
#### How to install Vue ESLint plugin
Installation is as easy as following a few steps. There are official guides that are kept upto date.
<useful-links>
<useful-links-section title="Official Links">
* [Vue CLI ESLint plugin <badge text="Recommended"/>](https://cli.vuejs.org/config/#eslint) - either on project setup or later
* [Vue ESLint User Guide](https://eslint.vuejs.org/user-guide/) - manually by following the official guide
</useful-links-section>
</useful-links>
#### How to enforce coding standards (Standard or Airbnb styles)
To have or not to have semicolons, closing brace on the same row or on the next, space after function name or not, these are all coding style related questions and are not connected with Vue in any way.
These can be enforced by a collection of rules, also called presets or standards. Two very popular ones are [Standard](https://standardjs.com/) and [Airbnb](https://github.com/airbnb/javascript), also known as "no semicolons vs with semicolons". But they are much more than that, take a look at each respectively and decide which one suits your styles best.
**Note:** The Vue ESLint plugin does not enforce any coding styles like Standard or Airbnb, those can be however setup via Vue CLI or manually. Vue has pre-built setups, that are meant for Vue CLI, but could be used as a guideline.
<useful-links>
<useful-links-section title="Vue ESLint coding styles">
* [@vue/eslint-config-standard](https://github.com/vuejs/eslint-config-standard)
* [@vue/eslint-config-airbnb](https://github.com/vuejs/eslint-config-airbnb)
</useful-links-section>
</useful-links>
#### Usage with Code Editors
Every major editor comes with ESLint support, either by an official or a community driven plugin. Follow the links to the guides below or upto date step by step instructions.
<useful-links>
<useful-links-section title="Setup ESLint with Editors">
* [VSCode](https://eslint.vuejs.org/user-guide/#visual-studio-code) - Requires plugin install, easy to configure.
* [Webstorm](https://eslint.vuejs.org/user-guide/#intellij-idea-jetbrains-webstorm) - Just enable from settings.
* [Sublime Text](https://eslint.vuejs.org/user-guide/#sublime-text) - Requires two plugins and a bit more setup.
* [Atom](https://eslint.vuejs.org/user-guide/#atom-editor) - Just small option change needed.
</useful-links-section>
</useful-links>
### Prettier
Prettier is a code formatting tool that enforces a very opinionated coding style onto many languages, among which are JavaScript, CSS and HTML. Its main benefits are that it integrates into any of the popular editors and can format code on each save of the IDE, keeping code styles the as close as possible between multiple developers.
The lack of options are actually one of its strong points, enforcing sensible defaults across the board.
#### How to use Prettier with Vue
If you just want to use Prettier, you can do so by installing it and using it directly via the command line. Follow the [installation guide](https://prettier.io/docs/en/install.html) for more details.
#### Using Prettier with ESLint
Prettier however does not work well with ESLint, out of the box. When used together, most often they have colliding rules between their style configurations. The problem is that, you cannot disable most of those in Prettier, as it was made to be "all or nothing" kind of thing.
The solution is to use an [ESLint plugin](https://prettier.io/docs/en/integrating-with-linters.html#eslint) to run Prettier from within ESLint. On top of that, with the help of another plugin that disables all colliding rules, ESLint can run Prettier without issues and then fix the rest when used with style standards like Standard or Airbnb.
If you are using Vue CLI, this comes out of the box, so no need to worry what plugins to install.
<useful-links>
<useful-links-section title="ESLint/Prettier links">
* [Official tutorial for Prettier and ESLint](https://prettier.io/docs/en/integrating-with-linters.html#eslint)
* [Formatting Vue.js Code with ESLint & Prettier](https://alligator.io/vuejs/vue-eslint-prettier/)
</useful-links-section>
</useful-links>
#### Integrating Prettier with Code Editors
**VSCode note:**
It is important to note that the Vetur plugin comes with some integrated version of Prettier which formats js and styles, but not templates, it uses **prettyhtml** for those. If you want to handle that with Prettier and ESLint, read the [Formatting guide](https://github.com/vuejs/vetur/blob/master/docs/formatting.md) on Vetur's docs.
<useful-links>
<useful-links-section title="ESLint/Prettier links">
* [Official Prettier editor integration tutorials](https://prettier.io/docs/en/editors.html)
* [How to properly set up Nuxt with ESLint and Prettier in VSCode](https://medium.com/@gogl.alex/how-to-properly-set-up-eslint-with-prettier-for-vue-or-nuxt-in-vscode-e42532099a9c) - Very well written tutorial on how to setup VSCode to work with both ESLint and Prettier.
* [Veturpack](https://github.com/octref/veturpack) - Project configured to work with Vetur and Prettier for VSCode.
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/forms.md
================================================
---
title: Handling Forms
---
# Forms
Vue.js comes with a lot of features that make working with forms easier out of the box, like the reactivity and events with modifiers and the two-way binding system on top of it. But if the libraries can speed up the development process and provide a ready to use, well tested environment, it may be worth to just use them instead of baking own alternative.
## Summary (TLDR)
Here are the top pics from each category
<useful-links>
<useful-links-section title="Easy Validation">
[Vee-Validate](#vee-validate) - little boilerplate, very intuitive, vastly popular
</useful-links-section>
<useful-links-section title="Customizable Validation">
[Vuelidate](#vuelidate) - very customisable
</useful-links-section>
<useful-links-section title="Forms generator">
[Vue Form Generator](#vue-form-generator) - provides the most fields out of the box
</useful-links-section>
<useful-links-section title="Most flexible">
[Vue Formulate](#vue-formulate) - covers both form generator and state management use cases
</useful-links-section>
</useful-links>
## Form Validation
You can write a simple form validation yourself, but if you want a well tested solution that's easy to get help with from other Vue developers, give a try to one of the libraries described below.
### Vee-Validate
[Vee-Validate](https://github.com/baianat/vee-validate) is a an all-inclusive library with string-based validators. One of its biggest advantages is that it's fully compatible with form validation of Laravel framework, which made it very popular among PHP developers. The validation is applied to form fields using scoped slots, allowing the users to keep the validators directly in the template if such is their preference. Another advantage is that it offers localized messages for validation rules.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repo](https://github.com/logaretm/vee-validate)
* [Docs](https://logaretm.github.io/vee-validate)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Template-Based Form Validation with Vue.js and vee-validate](https://alligator.io/vuejs/template-form-validation-vee-validate/)
</useful-links-section>
</useful-links>
### Vuelidate
With [Vuelidate](https://github.com/vuelidate/vuelidate) you don't validate your form fields directly, but rather by validating the data of your component, which state is compared to provided validation schema. Unlike string-based Vee-Validate, all validators in Vuelidate are functions. Vuelidate has many useful features but you will have to write some additional code too or use 3rd party plugins, like for the missing error messages handling.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repo](https://github.com/vuelidate/vuelidate)
* [Docs](https://vuelidate.js.org/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Simple Vue.js Form Validation with Vuelidate](https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/)
</useful-links-section>
</useful-links>
## Form Generators
Form generators are libraries that allow users to generate a set of form elements based on so called schema - data representation of form fields with support for various custom properties that are later applied to some more or less generic templates. There were multiple projects with an ambition to write an ideal form generator for Vue.js, but out of them, the following ones achieved a state in which they're suitable for actual use.
### Vue-Form-Generator
[Vue-Form-Generator](https://github.com/icebob/vue-form-generator) is the most popular form generator for Vue.js. It uses an array based schema, it's own validation solution and a set of templates based on Bootstrap. You can use one of two builds - basic with most commonly used fields and the full one, with all the bells and whistles the library has to offer. Both can be extended with your custom fields.
The library has good documentation, high test coverage, and was the first fully production ready project of its kind for Vue.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repo](https://github.com/icebob/vue-form-generator)
* [Docs](https://icebob.gitbooks.io/vueformgenerator)
</useful-links-section>
</useful-links>
### Vue Formulate <badge text="Most Flexible"/>
[Vue Formulate](https://github.com/wearebraid/vue-formulate) excels in its flexibility. You can treat it as a form generator or compose the forms directly in the template from provided components. Out of the box, it comes without the more complex components available for Vue-Form-Generator, but it's easy to create your own thanks to robust plugin and scoped slots architecture, which gives hopes for an ecosystem of 3rd party extensions in the future. You're also not bound to a specific CSS framework.
The project is well maintained and offers extensive documentation, good internalization support, and built-in validators.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repo](https://github.com/wearebraid/vue-formulate)
* [Docs](https://vueformulate.com)
</useful-links-section>
</useful-links>
### Vue-Formly
[Vue-Formly](https://github.com/formly-js/vue-formly) takes obvious inspiration from [Angular-Formly](http://angular-formly.com). It's an older project, written originally for Vue 1, but now fully working with Vue 2.
It allows you to write your custom set of templates or use the standard components for Bootstrap, which are available as a separate library. Just like Vue-Form-Generator, it uses its own validation system.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repo](https://github.com/formly-js/vue-formly)
* [Docs](https://matt-sanders.gitbooks.io/vue-formly)
</useful-links-section>
</useful-links>
## Form State Management
Form state management libraries usually have smaller scope than form generators and their main task is to help the developer to get rid of the common boilerplate. It takes care of the most annoying parts of writing forms, while still leaving you the full control over your templates. Such libraries can have different structure, based on classes, scoped slots or mixins.
### Vue-Final-Form
[Vue-Final-Form](https://github.com/egoist/vue-final-form) is a scoped slots based integration of Final Form, a framework-agnostic library that became pretty famous thanks to its subscription based state management system. Among its advantages are nice API and the focus on performance. Being written by [Egoist](https://twitter.com/_egoistlily), a Vue.js Core Team alumni, will also be a plus for many.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repo](https://github.com/egoist/vue-final-form)
* [Docs](https://egoist.github.io/vue-final-form)
</useful-links-section>
</useful-links>
### Vue-SimpleForm
[Vue-SimpleForm](https://github.com/blocka/vue-simpleform) is heavily influenced by [Formik](https://github.com/jaredpalmer/formik), a popular forms solution in React ecosystem. In order to use it, you just pass the form with its fields as a scoped slot to a wrapper component and it manages the state for you. If you're familiar with Formik because of your React experience and like how it works, by all means give it a go.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repo](https://github.com/blocka/vue-simpleform)
</useful-links-section>
</useful-links>
## Other Libraries
There are many kinds of form related libraries that serve different purposes. Let's mention the most popular among them.
### Vue-Form-Wizard
[Vue-Form-Wizard](https://github.com/cristijora/vue-form-wizard) allows you to create a multiple step form wizard, commonly used in online shops and other commercial web apps.
You can use it with UI and validation libraries of your choice, it also provides support for Vue-Router. Its author, [Cristi Jora](https://twitter.com/jora_cristi), took the effort to provide comprehensive documentation and many code examples for different use cases.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repo](https://github.com/cristijora/vue-form-wizard)
* [Docs](https://cristijora.github.io/vue-form-wizard)
</useful-links-section>
</useful-links>
### Vue-Multiselect
Out of all kinds of form fields, multiselect is usually the most tricky to implement. Luckily [Damian Dulisz](https://twitter.com/damiandulisz) from the Core Team took care of that and wrote [Vue-Multiselect](https://github.com/shentao/vue-multiselect). Thanks to smart architecture, it's highly configurable and you can make it look the way it fully fits your design.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repo](https://github.com/shentao/vue-multiselect)
* [Docs](https://vue-multiselect.js.org)
</useful-links-section>
<useful-links-section title="Tutorials">
* [How to create a custom selected list using Multiselect](https://medium.com/@hugodesigns/how-to-use-the-most-complete-selecting-solution-for-vue-js-f991b2605364)
</useful-links-section>
</useful-links>
## Learning materials
Here's a list of selected general materials on how to write forms in Vue.js that don't require using any specific library.
<useful-links>
<useful-links-section title="Tutorials">
* [An imperative guide to forms in Vue.js 2](https://logrocket.com/blog/an-imperative-guide-to-forms-in-vue-js-2/)
</useful-links-section>
<useful-links-section title="Books">
* [Building Forms with Vue.js](https://vue-community.org/guide/learning/books.html#building-forms-with-vue-js)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/gridsome.md
================================================
# Gridsome
================================================
FILE: docs/guide/ecosystem/hosting.md
================================================
# Hosting
Choosing a proper hosting for a Vue.js website can be frustrating. To choose a proper hosting provider, you need to know the type of website you are working with. Typically Vue.js websites can be split into 2 major categories:
## Static File Websites
These websites are made out of only static files, that require no server scripts, and are entirely run on the clients browser. Such websites are:
* Pre-rendered - websites that are pre-rendered before deploying to a server, meaning each page is represented by a static HTML file. Check out the [Statically Generated Websites](../learning/how-to-learn-vue.md#statically-generated-websites) for more info.
* SPA - websites consisting of a single `index.html` entry and a bunch of generated static assets. Page rendering and routing is done on the client in the browser. Such websites do not require a dedicated server to run and can be hosted on a static file hosting. Check out the [SPA Websites](../learning/how-to-learn-vue.md#spa-websites) page for more info.
These websites can be hosted on [Traditional Hosting](#traditional-server-hosting) or on the cheaper [Static File Hosting](#static-file-hosting) described below. Check the [Vue CLI 3 - Deployment](https://cli.vuejs.org/guide/deployment.html) page to see how to deploy to the most popular hosting providers.
## Static File Hosting
Static file hosting is generally used to serve rarely changing assets, that are processed and generated upfront, to the client's browser in the most optimized and fast way. Such hosting solutions are perfect for SPAs or pre-rendered websites, as they are mostly a collection of static files and require no runtime processing. These hosting services cannot run files containing dynamic code like `.php` or `.js` node scripts.
<useful-links>
<useful-links-section title="Tutorials">
[What is Static Content?](https://www.maxcdn.com/one/visual-glossary/static-content/)
</useful-links-section>
</useful-links>
### Netlify <badge text="Popular"/>
Netlify is a popular choice for a static file hosting service. It offers a simple to use interface, global CDN, free and easy to setup SSL, URL rewrites, custom header setup, cloud functions and more.
They offer integration with GitHub, GitLab and Bitbucket. Netlify offers a free hosting tier, which should suit most people's needs.
<useful-links>
<useful-links-section title="Official">
* [Netlify Documentation](https://netlify.com)
</useful-links-section>
<useful-links-section title="Tutorials">
* [How to deploy your Vue app with Netlify in less than 2 min!](https://medium.com/vuejoy/how-to-deploy-your-vue-app-with-netlify-in-less-than-2-min-d6ab26c6557d)
* [Deploy Nuxt.js Static App to Netlify](https://vueschool.io/lessons/deploy-nuxtjs-app-to-netlify)
* [CSS-Tricks article on Netlify](https://css-tricks.com/static-file-hosting-doesnt-have-to-be-so-static/)
</useful-links-section>
</useful-links>
### GitHub/GitLab/Bitbucket Pages
The top 3 git services offer free static website hosting. You can deploy your websites to them by just committing your code to a repo, which will get automatically deployed for you. You can connect a custom domain or use their subdomains, GitLab even offers a CI pipeline to build your website on the fly.
<useful-links>
<useful-links-section title="Tutorials">
* [Deploy Vue to GitHub pages-the easy way!](https://medium.com/@codetheorist/vue-up-your-github-pages-the-right-way-955486220418)
* [Deploy CLI 3 app to GitLab Pages](https://cli.vuejs.org/guide/deployment.html#gitlab-pages)
* [Bitbucket Pages](https://pages.bitbucket.io/)
</useful-links-section>
</useful-links>
### Firebase Hosting
Firebase hosting is a free static content hosting by Google, which offers a quick and easy way to deploy websites to a global CDN. Their [Cloud Functions](https://firebase.google.com/docs/functions/) can be used to build serverless microservices with Node.js. They also offer lightweight hosting configuration options like URL rewrites and custom header setup.
<useful-links>
<useful-links-section title="Official">
* [Firebase Hosting docs](https://firebase.google.com/docs/hosting/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [How to Deploy Vue.js Applications with Firebase Hosting](https://medium.com/@rachidsakara/how-to-deploy-vue-js-applications-with-firebase-hosting-40cfa7f724e4)
* [Deploy a Vue.js App with Firebase Hosting](https://medium.com/@ShayneOSullivan/deploy-a-vue-js-app-with-firebase-hosting-3fc420cf3998)
</useful-links-section>
</useful-links>
### CloudFront
CloudFront is a fast content delivery network by Amazon. They boast high speed, low downtime and flexible configuring options, at a pay-as-you-go pricing model. CloudFront is integrated with AWS and works seamlessly with other Amazon services like DDoS mitigation, Amazon S3, load balancing and more.
<useful-links>
<useful-links-section title="Official">
* [CloudFront](https://aws.amazon.com/cloudfront/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Deploy Vue App to AWS S3](https://itnext.io/deploy-vue-app-to-aws-s3-1256ce03a7a2)
</useful-links-section>
</useful-links>
### Surge.sh
Well established, easy and fast command line driven, static file hosting. They have lots of guides for the most popular build tools, services and, custom domain mapping and offer a free tier.
<useful-links>
<useful-links-section title="Official Tutorials">
* [Deploying a Vue CLI app to Surge](https://cli.vuejs.org/guide/deployment.html#surge)
* [Deploying a Nuxt app to Surge](https://nuxtjs.org/faq/surge-deployment/)
* [Surge Documentation](https://surge.sh/)
</useful-links-section>
</useful-links>
### Now.sh
Free static file hosting with support for lambda functions. "Now" is a pretty good choice as it offers a global CDN, its very fast to build and optimized for maximum app loading speed. Server auto-scaled up and down instances based on usage.
<useful-links>
<useful-links-section title="Official">
* [Now documentation](https://zeit.co/now)
</useful-links-section>
</useful-links>
## Server Rendered Websites
These websites can be SPAs or normal websites that have only parts of them written in Vue. They usually require a script to be run on the server to render the page, be it Node.js, PHP or other server language. Examples of such are Laravel websites, Node.js apps written in Express, Koa, Adonis or other similar framework.
* SSR (Universal) SPA - websites are rendered on the server upon visit, then the SPA part of the website takes over routing, rendering and other functionality. These typically require a Node.js server constantly running. Check out the [What Are Server Side Rendered Apps](../learning/how-to-learn-vue.md#ssr-spa-websites) page for more info.
* Server Rendered No-SPA - server rendered websites, that rely on the server to render and handle routing, using Vue for additional in-browser functionality. Most commonly seen are Laravel, WordPress, Rails or Django based websites. Visit the [Vue Enhanced Websites](../learning/how-to-learn-vue.md#vue-enhanced-websites) page for more info.
These websites can only be run on a more traditional server hosting, where a server script is always listening and handling incoming requests.
## Traditional Server Hosting
If you are planning to build a Laravel or Nuxt.js powered website, then you will need a more traditional hosting solution.
Opposed to static file hosting, this kind of hosting offers a configured server, that is constantly up and ready to run your dynamic scripts. Be it Node.js or PHP, such hosting providers are usually paid as they require dedicated resources to be allocated to you. There are free solutions, but they are usually very limited in terms of features, with some very good cheap ones available.
One would use such a hosting service typically for hosting a PHP, Python or Node.js backed website.
### Heroku
<useful-links>
<useful-links-section title="Tutorials">
* [Quick-n-clean way to deploy Vue + Webpack apps on Heroku](https://codeburst.io/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8)
</useful-links-section>
</useful-links>
### Digital Ocean
::: contribute
:::
================================================
FILE: docs/guide/ecosystem/i18n.md
================================================
# I18n
Making a website internationalized (i18n) is a common task, but it is something that trips most developers into spending lots of time and energy figuring out.
You can easily add i18n to a Vue powered website by using one of the packages listed below:
## Vue I18n <badge text="Popular"/>
Vue I18n is one of the first and most popular packages for implementing i18n into Vue apps, written by one of the Vue core team members. It can be used with flat or nested messages, adds support for dynamic properties, SFC style messages via custom tag, pluralisation, dynamic message and language registration, custom component and tag injection into translation string via placeholders and much more.
It has a Vue CLI plugin, which takes care of installation and setup, along with an optional ESLint plugin with rules for best practices. The Vue-i18n-extract package allows tracking missing and unused translation strings.
Vue I18n can be used inside Vue files as well as outside, in Router guards or Vuex, via a simple VueI18n instance export.
<useful-links>
<useful-links-section title="Official">
* [Documentation](https://kazupon.github.io/vue-i18n/)
* [Vue CLI plugin](https://github.com/kazupon/vue-cli-plugin-i18n)
</useful-links-section>
<useful-links-section title="Learning material">
* [A Vue.js starter project for i18n websites](https://github.com/dobromir-hristov/vue-i18n-starter)
* [Add i18n and manage translations of a Vue.js powered website](https://medium.com/hypefactors/add-i18n-and-manage-translations-of-a-vue-js-powered-website-73b4511ca69c)
* [from internationalization (i18n) to localization (l10n) and back again](https://medium.com/@jamuhl/vue-js-from-internationalization-i18n-to-localization-l10n-and-back-again-c3e5f7cc5e71)
</useful-links-section>
<useful-links-section title="Tools">
* [vue-i18n-extract](https://pixari.github.io/vue-i18n-extract/)
* [eslint-plugin-vue-i18n](https://eslint-plugin-vue-i18n.intlify.dev/)
* [VSCode extension - Vue i18n Ally](https://github.com/antfu/vue-i18n-ally)
</useful-links-section>
</useful-links>
## Vuex-I18n
Vuex-i18n is a simpler, more basic i18n package, that relies on a Vuex module to store the translation messages.
It also supports lazy registration of translation strings, basic pluralisation, custom string fallback handling, dynamic parameters and inline default string definition.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repository](https://github.com/dkfbasel/vuex-i18n)
</useful-links-section>
</useful-links>
## Vue-I18Next
> i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.
Vue-i18Next is a wrapper around the i18next library, which is a general, framework agnostic package for managing localisation and internationalisation, lazy loading translations, Namespaced translation for components, component interpolation.
They offer an optional, very well integrated web service for managing translations - [locize.com](https://locize.com/)
<useful-links>
<useful-links-section title="Official">
* [Documentation](https://panter.github.io/vue-i18next/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Deep Dive: Vue Translation with vue-i18next](https://phraseapp.com/blog/posts/vue-translation-with-vue-i18next/)
</useful-links-section>
</useful-links>
## fluent-vue
fluent-vue is an internationalization plugin for Vue.js. It is a Vue.js integration for [Fluent.js](https://github.com/projectfluent/fluent.js) - JavaScript implementation of Mozilla's [Project Fluent](https://projectfluent.org).
> Fluent is a localization paradigm designed to unleash the expressive power of the natural language. The format used to describe translation resources used by Fluent is called FTL. FTL is designed to be simple to read, but at the same time allows to represent complex concepts from natural languages like gender, plurals, conjugations, and others.
<useful-links>
<useful-links-section title="Official">
* [GitHub Repository](https://github.com/demivan/fluent-vue)
* [Documentation](https://fluent-vue.demivan.me/)
</useful-links-section>
<useful-links-section title="Learning material">
* [Fluent Syntax Guide](https://projectfluent.org/fluent/guide/)
</useful-links-section>
<useful-links-section title="Tools">
* [fluent-vue-loader](https://fluent-vue.demivan.me/integrations/webpack.html) - Webpack loader that adds support for custom blocks in SFC
* [rollup-plugin-fluent-vue](https://fluent-vue.demivan.me/integrations/rollup.html) - Rollup\Vite plugin that adds support for custom blocks in SFC
* [VSCode extension - Vue i18n Ally](https://github.com/lokalise/i18n-ally)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/legacy.md
================================================
# Legacy Packages
::: contribute
:::
Here we list popular Vue libraries that have had their time of fame and glory and are now either not actively
developed or obsolete.
================================================
FILE: docs/guide/ecosystem/mobile-apps.md
================================================
# Mobile Apps
Building mobile applications with JavaScript is not a new thing and has been around for quite some time now. The advantages over native solutions, built with Swift or Android is that you could apply what you know about building web apps, and leverage some of the thousands of packages on npm.
On this page, we will go through the different ways one can build a mobile app with Vue, and the pros and cons behind each.
<useful-links>
<useful-links-section title="Tutorials">
* [Hybrid Apps vs. Native Apps: Which Should You Build?](https://themanifest.com/app-development/hybrid-apps-vs-native-apps-which-should-you-build)
* [10 Best Vue.js based UI Frameworks for Building Mobile Apps](https://superdevresources.com/vuejs-mobile-frameworks/)
</useful-links-section>
</useful-links>
## Summary (TLDR)
<useful-links>
<useful-links-section title="Native Apps">
[NativeScript-Vue](#nativescript-vue-badge-textpopular)
</useful-links-section>
<useful-links-section title="Hybrid Apps">
* [Quasar](#quasar)
* [Ionic Vue](#ionic-vue)
</useful-links-section>
<useful-links-section title="PWA">
* [Nuxt PWA](https://pwa.nuxtjs.org/)
* [Quasar](https://quasar-framework.org/guide/pwa-configuring-pwa.html)
</useful-links-section>
</useful-links>
## Compile to Native
These are applications that are written in JavaScript by using a predefined set of custom UI components. During build time, the code then gets transformed to native for each required platform.
The benefit of using such applications is that you can use your existing JavaScript knowledge to build truly native apps that can look and feel native. Components made in Native code can also be integrated with such apps.
::: tip Pros
* Builds to Native platform code
* Performant
* Direct access to all native APIs
* Allows usage of already existing platform UI components
* Apps can look and feel truly native
:::
::: danger Cons
* Cannot use HTML, only provided XML-like components by framework
* Cannot use CSS to style components
* Need to use different components for each platform
:::
### Weex
[Weex](https://weex.apache.org) was the first native solution for Vue.js. The framework was written by developers of top Chinese companies and fully supports Vue components. It promises a "build once, ship everywhere" methodology, opposed to other similar solutions.
It has a CLI tool, official UI theme and a set of plugins.
Weex has a deep integration with Vue, thus the support parity between the two is very good.
:::warning Keep in mind
* It is developed and used mostly in China, so it may be a con for someone.
* Not enough learning material in English, besides official docs.
:::
<useful-links>
<useful-links-section title="Tutorials">
* [Native Mobile Apps with Weex and VueJS 2.0](https://hackernoon.com/how-to-create-a-weex-vue2-project-6b94981bee4e)
* [Native Mobile Apps with Vue.js and Weex: Getting Started](https://alligator.io/vuejs/getting-started-vue-weex/)
* [Native apps with Vue.js: Weex or NativeScript? — chapter I](https://hackernoon.com/native-apps-with-vue-js-weex-or-nativescript-8d8f0bac041d)
* [Native apps with Vue.js: Weex or NativeScript? — chapter II](https://hackernoon.com/native-apps-with-vue-js-weex-or-nativescript-chapter-ii-6d1776da090d)
</useful-links-section>
</useful-links>
### NativeScript-Vue <badge text="Popular"/>
> NativeScript-Vue is a NativeScript plugin which allows you to use Vue.js to craft your mobile application.
[NativeScript-Vue](https://www.nativescript.org) is one of the most popular solutions for native mobile apps with Vue.
It offers excellent developer experience for building truly native mobile apps. Similar to ReactNative, as with other similar frameworks, you develop using a set of pre-built Vue components, using the existing Vue and JS knowledge. Knowledge of Native API's is required
With a vast growing popularity and community, the wide adoption of NativeScript across companies, first class support for Vue by official NativeScript team, it is a very good choice.
::: tip Pros
* Active, growing English speaking community
* First-class support by NativeScript
* Very actively developed
* Vue-Devtools support
* Cross-platform without maintaining two code bases.
:::
::: warning Keep in mind
* Routing is done manually, no Vue-Router support
* Styling is done via a constrained set of CSS rules
* Lots of examples for Angular, might need to adapt
:::
<useful-links>
<useful-links-section title="Official">
* [Documentation](https://nativescript-vue.org/en/docs/introduction/)
* [Playground Tutorial](https://nativescript-vue.org/en/docs/getting-started/playground-tutorial/)
* [Learn NativeScript-Vue the Easy Way](https://www.nativescript.org/blog/learn-nativescript-vue-the-easy-way)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Lessons Learned on Writing Apps with NativeScript VueJS](https://medium.com/learning-lab/lessons-learned-on-writing-apps-with-nativescript-vuejs-bd6a3066f0cb)
* [Getting Started with building Mobile Apps with NativeScript and Vue.js](https://www.vuejsradar.com/getting-started-with-building-mobile-apps-with-nativescript-and-vuejs/)
* [Getting Started with NativeScript-Vue 1.0](https://vuejsdevelopers.com/2018/03/05/getting-started-vue-nativescript/)
* [Native Mobile Apps with Vue.js and NativeScript](https://alligator.io/vuejs/getting-started-vue-nativescript/)
</useful-links-section>
</useful-links>
### Vue-Native
Vue Native is a mobile framework made for building native mobile apps using Vue.js. It acts as a wrapper around **React Native** APIs, which allows you to use Vue.js to compose rich mobile User Interfaces. For APIs that React Native does not support, you have to write **"bridges"** in the platform's native code or install external plugins.
Being younger than NativeScript-Vue, it has a smaller community and adoption, but is nonetheless growing as well.
<useful-links>
<useful-links-section title="Official">
* [Vue-Native Documentation](https://vue-native.io/docs/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [How to Setup, Build and Deploy Native Apps with Vue](https://scotch.io/tutorials/how-to-setup-build-and-deploy-native-apps-with-vue)
* [Vue Native Basics](https://www.youtube.com/watch?v=8e0XHPylhj0)
</useful-links-section>
</useful-links>
## Progressive Web Applications
Progressive Web Apps are basically mobile friendly SPA's, that can be installed as native apps on your mobile device, from within the browser. They give you the freedom to choose how you build the app, using the already known web technologies, without the need to wrap it with PhoneGap or similar.
Such apps still run inside a hidden browser window, so they are limited to what the browser's APIs offer. Nonetheless, these apps are receiving a wide adoption and are a very good choice for cases where the website and mobile application should function the same.
Below is a list of popular tools to generate a PWA quickly:
<useful-links>
<useful-links-section title="Articles">
* [Native application VS Progressive Web App: which one should you choose?](https://medium.com/inside-smartapps/native-application-vs-progressive-web-app-which-one-should-you-choose-5eeaaf6ee92d)
* [PWA vs Native App and How to Choose Between Them](https://blog.magestore.com/pwa-vs-native-app/)
</useful-links-section>
<useful-links-section title="PWA Generators">
* [Vue CLI](https://naturaily.com/blog/pwa-vue-cli-3) - official CLI plugin to transform SPA's to PWA
* [Nuxt PWA](https://pwa.nuxtjs.org/) - Nuxt module that adds PWA support to Nuxt apps
* [Vuepress](https://v1.vuepress.vuejs.org/plugin/official/plugin-pwa.html) - Plugin to enable offline support
* [Quasar](https://quasar-framework.org/guide/pwa-configuring-pwa.html) - Out of the box PWA generator via CLI
* [Gridsome](https://gridsome.org/) - Generates out of the box PWA ready app
</useful-links-section>
</useful-links>
## Hybrid Apps
Hybrid apps are built by reusing well established tools for making websites like HTML, CSS and JavaScript with a minimal extra learning curve. These web based projects can then be compiled to native mobile apps with build tools such as (Cordova)[https://cordova.apache.org] or it's more recent successor (Capacitor)[https://capacitorjs.com]. The build tool wraps the web app in a native shell and provides access to native device functionality via unified JavaScript APIs. This allows developers to write one code base that can then run natively across platforms.
::: tip Pros
* Uses plain HTML, CSS and JavaScript
* Build once, run everywhere
* Can be fully custom styled with CSS
* Wide range of Established UI libraries
* Cheaper to create than Native
:::
::: danger Cons
* Generally slower than Native apps
* Access to lower level device APIs is dependent on wrapper (Cordova or Capacitor)
* Platform inconsistencies
:::
## Mobile UI libraries
These are UI frameworks that offer native mobile looking components, build for the web with Vue and CSS. These components try to mimic the look and functionality of their native counterparts as close as possible.
Most UI frameworks allow you to use the same component and swap out it's styling during the bundling phase, giving it a native look for the current mobile platform.
Some frameworks focus more towards one platform, so careful consideration must be taken, if true native look is required for each platform.
### Quasar <badge text="Popular"/>
Quasar is a very active and fast growing Vue UI framework, one of the first targeting desktop and mobile in particular. It offers a large and ever extending set of pre-built components, some mimic mobile elements, and a bunch of other useful general use case ones.
Quasar comes with a CLI for easy application bootstrapping, managing, and bundling your mobile app for each platform. Integrates many tools into a full featured framework including support for PWAs, i18n, Vuex, Vue Router, code splitting, option of Cordova or Capacitor for native builds and more.
<useful-links>
<useful-links-section title="Official">
* [Documentation](https://quasar-framework.org/guide/)
* [Discord Chart server](https://discordapp.com/invite/5TDhbDg)
* [Forum](https://forum.quasar-framework.org/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Make your Vue.js project fast, cheap and good!](https://medium.com/quasar-framework/the-quasar-method-e19daf9abb5f)
</useful-links-section>
<useful-links-section title="Videos">
* [Create a Vue js app & deploy to web, mobile app & desktop app in 30 minutes!](https://www.youtube.com/watch?v=iml3hDVboHk)
* [Quasar Framework for Vue.js](https://www.youtube.com/watch?v=Ud8jS3VlVHw)
</useful-links-section>
</useful-links>
### Ionic Vue <badge text="New"/>
One of the most popular mobile UI frameworks in the world, Ionic was originally built for Angular, but with their latest release they now support Vue 3, thanks to their [move to web components](https://blog.ionicframework.com/introducing-ionic-4-ionic-for-everyone/).
Ionic has a vast community, but as most tutorials are for the previous versions, using Angular, Vue users might have to adopt the examples, but the concepts are the same. New material targeting Ionic Vue is starting to emerge gradually now that it has finished beta.
As with other frameworks, it provides a set of components that change look depending on the OS they are built for and a CLI tool for starting projects and easily integrating Capacitor for native builds.
::: warning Keep in mind
* Still young and small community
:::
<useful-links>
<useful-links-section title="Official">
* [Documentation](https://ionicframework.com/docs/vue/overview)
* [Components](https://ionicframework.com/docs/components)
* [Announcing Ionic Vue](https://ionicframework.com/blog/announcing-ionic-vue)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Your First Ionic Vue App](https://ionicframework.com/blog/new-tutorial-your-first-ionic-vue-app)
</useful-links-section>
<useful-links-section title="Videos">
* [Mobile apps with Vue and Ionic](https://www.youtube.com/watch?v=bJKwPsOqcqM)
</useful-links-section>
</useful-links>
### Framework 7
Framework 7 is an already established, mobile focused UI framework, offering native like looking themes for both IOS and Android. It was originally built with IOS in mind, with Material Design added later.
They officially support Vue on top of their components. Along with mobile apps using Cordova, you can easily develop Web Apps (SPA) with PWA support via their CLI.
They have a nice documentation, though the Vue part is lacking a bit on explanations, so jumping between it and standard component docs may be necessary.
<useful-links>
<useful-links-section title="Official">
* [Documentation](https://framework7.io/vue/)
* [Tutorials](https://framework7.io/tutorials/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Build a chat app using Framework7](https://pusher.com/tutorials/chat-app-framework7)
</useful-links-section>
<useful-links-section title="Videos">
* [Build an app with Framework7 1.x and VueJS tutorial](https://www.youtube.com/watch?v=mG12D07YXwk&t=7s)
* [Building Mobile Apps with Vue and Framework7](https://www.youtube.com/watch?v=iq1lJdVzpik)
</useful-links-section>
</useful-links>
### Onsen UI
::: contribute
:::
### Mint UI
::: contribute
:::
================================================
FILE: docs/guide/ecosystem/nuxt.md
================================================
# Nuxt
::: contribute
:::
- should i learn vue first
- who is nuxt for
- what projects are good for nuxt
- advantages of nuxt
- modules
- a nuxtpress section
- ecosystem
- vue-cli and other tools
================================================
FILE: docs/guide/ecosystem/projects-worth-mentioning.md
================================================
# Projects Worth Mentioning
These are projects that we just dont have a category for, but are absolutely worth mentioning.
## Vue Storefront
[Vue Storefront](https://www.vuestorefront.io/) is a headless and backend-agnostic eCommerce [Progressive Web App (PWA)](https://developers.google.com/web/progressive-web-apps/) written in Vue.js. The fact that it's using headless architecture allows Vue Storefront to connect with any eCommerce platform so it can be a frontend PWA for Magento, Shopify, BigCommerce, WooCommerce and etc.
================================================
FILE: docs/guide/ecosystem/server-side-rendering.md
================================================
# Server Side Rendering
Server side rendering can be explained as moving the process of rendering pages of an SPA from the client's browser to the server on **initial page request**. This process is similar to what we used to do a few years ago, where we had server side languages like PHP, Java, Python render the page and return an HTML response.
The difference is, that the server renders the page only on first page visit, once the page gets loaded by the client's browser, the JavaScript framework, Vue in our case, takes over the application's routing and rendering processes, giving the impression of a faster navigation and smoother experience.
<useful-links>
<useful-links-section title="Tutorials">
* [The Benefits of Server Side Rendering Over Client Side Rendering](https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8) <badge>Good read</badge>
* [What’s Server Side Rendering and do I need it?](https://medium.com/@baphemot/whats-server-side-rendering-and-do-i-need-it-cb42dc059b38)
* [When to use Server-Side Rendering (SSR) in Vue.js projects](https://codeburst.io/when-to-use-server-side-rendering-ssr-in-vue-js-projects-697bd925d57b)
* [What is React Server Side Rendering and should I use it?](https://dev.to/mladenstojanovic/what-is-react-server-side-rendering-and-should-i-use-it-5b7i) - For React, by the concepts are the same.
</useful-links-section>
</useful-links>
## Benefits of Server Side Rendering (SSR)
Server side rendering solves a few of the most annoying problems of single-page applications:
### SEO friendly
Most crawlers cannot scan websites that are rendered with JavaScript, resulting search engines registering empty pages without content. This directly leads to bad search engine ranking.
**Note:** Google can actually parse and crawl JavaScript rendered websites, but this still does not guarantee good ranking. They also use an older version of Chrome to render the pages, which can lead to errors if code is not transpiled to support older browsers.
With SSR, pages are returned as fully rendered HTML by the server, allowing for crawlers to scan at will.
### Fast Load on Slower Devices
Heavy applications that require lots of resources for the initial rendering, may cause slower or older devices to struggle. This is a real problem, as the average user doesn't have the latest cutting edge mobile device.
With SSR, the page is fully rendered on the server, eliminating that initial burden for lower end devices. When paired with some other optimisation techniques, like code splitting, pages can load much faster.
### Social Presence
When sharing your website on various social media, they will show a small preview and extract metadata from it. Normal SPA applications are very poor at this and often result in blank pages with little to no metadata. Social media crawlers cant really parse JavaScript, so they don't know what to do with SPAs.
With SSR, pages are displayed with nice previews, as both the page content it self and meta tag data is present, allowing for social media crawlers to extract what they need.
### Time To First Paint (TTFP)
Pages will be rendered faster when using SSR, as the browser does not need to download the whole JavaScript bundle to start rendering. This does not however mean a fully functioning website.
<useful-links>
<useful-links-section title="Internal Pages">
[Problems with SSR - Time to interaction](#time-to-interaction) - for more info.
</useful-links-section>
</useful-links>
## Problems with SSR
SSR sounds awesome, there are however some things that need to be taken in consideration.
### Time to Interactive
Even though users can see the website, it doesn't mean it is fully working. For very dynamic websites with a lot of JavaScript logic driving the UI, this can lead to weird situations where the page is rendered and looks ready, but the app bundle is still downloading, so no JavaScript logic can be executed yet.
### Time to First Byte (TTFB) is Slower
Because the server has to actually do the rendering, fetch async data and so on, the time it takes for the response to hit the browser is bigger.
### Server Costs
Because there is usually a live Node.js instance always on, waiting to render a request, server costs are higher than static file hosting.
<useful-links>
<useful-links-section title="Internal Pages">
[Hosting page](./hosting.md#server-rendered-websites) - for more info.
</useful-links-section>
</useful-links>
### Server Load
This is directly related to the above. Server load is higher on initial request, while pages are being rendered, sometimes blocking other operations until the process is done.
### Platform Specific APIs are not Available
Because the app is rendered in server environment, there are specific APIs that are not available, like the `window` object. This means libraries like sliders and carousels may not work, and will throw errors during render.
To overcome this, developers should not interact with those APIs, in places, that are being called during server rendering. Their usage should be moved to lifecycle hooks like `mounted`, where the browser environment is present.
With sliders and carousels, you could delay their rendering to after the client receives the page, so it gets rendered on the browser.
<useful-links>
<useful-links-section title="Tutorials">
* [The guide to write universal, SSR-ready Vue components](https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon/#window%2C-document%2C-and-friends---platform-specific-apis)
</useful-links-section>
</useful-links>
### Complex to Transform Deployed SPA to SSR
Because of the above, already deployed websites are harder to transform to SSR, as there might be a lot of plugins or UI components, that rely on the Platform Specific APIs, explained above.
This is an issue mostly related with library and plugin authors not providing SSR compliant versions of their software.
There are ways around this, like using the `no-ssr` component helpers, which delay rendering of components to the browser. This means that the component tag will be returned in the initial html response and not its rendered template. This might be problematic for components with SEO heavy content.
## Available Options for Vue
:::tip
This part of the page is still in development and could use some help.
:::
Thankfully, there are a few options already for Vue when it comes to server-side rendering.
## Nuxt <badge text="popular"/>
[Nuxt](https://nuxtjs.org/) is a framework on top of Vue for creating universal applications. It offers a full SSR environment, with an extendable API, out of the box.
If you are searching for a well tested solution, with a large community and nice development experience, Nuxt is most probably what you should pick.
Learn more about it on the dedicated [Nuxt](./nuxt.md) page.
### NuxtPress <badge text="newcomer"/>
[Nuxtpress](https://nuxt.press/en/guide/) is a microframework on top of Nuxt for creating blogs and documentation using Markdown. It offers full support for Nuxt static generate mode and hot reloading for `.md` files.
Learn more about it on the dedicated [Nuxt](./nuxt.md) page.
## Quasar Framework
[Quasar](https://quasar.dev) with its CLI mode of operation, allows for you to build a SPA or PWA and have it served from the server initially. This gives you all of the advantages mentioned above. Quasar's build system offers you a Node Express Server out of the box, which you can also later enhance as you wish. The main point being, one build command through Quasar's CLI does it all for you.
<useful-links>
<useful-links-section title="Official">
* [Quasar repositories](https://github.com/quasarframework)
* [Quasar documentation](https://quasar.dev)
+ [Quasar SSR documentation](https://quasar.dev/quasar-cli/developing-ssr/introduction)
* [Quasar chat on Discord](https://chat.quasar.dev)
* [Forum](https://forum.quasar.dev)
</useful-links-section>
</useful-links>
## Servue
[Servue](https://futureaus.github.io/servue/) shares a similar scope to Nuxtjs, it allows you to render `.vue` files into rendered html. It includes features for head meta tag management, layouts and more. Servue is more suitable for Multi-page-applications using existing server-side routing systems such as koa/koa-router or express.js
## Vapper
[Vapper](https://vapperjs.org/) is a lighter framework for building server-rendered applications using Vue. Opposed to Nuxt, Vapper is more lower level oriented, meaning it does not rely so much on conventions, but rather lets the user choose how to configure their app.
If you need more freedom to configure your application, with little to no interference from the SSR framework, Vapper may be your choice.
## Vue Server Renderer
Vue Server Renderer is a lower level tool that is used by most of the above mentioned frameworks to render Vue apps on the server.
You can use it in tandem with an Express server or similar solution, to render pages on each user visit to the app. Just keep in mind, you will have to write a lot more boilerplate and configuration by yourself, compared to the already pre-made solutions.
If you don't need some really custom solution, we would advise you to pick one of the pre-made tools mentioned above.
<useful-links>
<useful-links-section title="Official">
* [SSR Docs](https://ssr.vuejs.org/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Basic Server Side Rendering with Vue.js and Express](https://alligator.io/vuejs/basic-ssr/)
* [VueJs: Server Side Render with Vue-router](https://medium.com/frontend-fun/vuejs-server-side-render-with-vue-router-e73d51699873)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/static-site-generators.md
================================================
# Static Site Generators
Static site generators are tools that allow Single-page applications to be pre-rendered as HTML files before being deployed to the server. This allows for near instant page load times, no flash of unstyled content, improved SEO and more.
The process in first glance is similar to SSR, with the difference that instead of a node script generating each page, we have have a headless browser, loading app routes and saving the result as static HTML files. This allows you to get almost all the advantages of SSR, without the disadvantages. Websites can then be served with any [static-file-hosting](./hosting.md#static-file-hosting) solution, like Github pages or Netlify. Most websites can benefit from pre-rendering without the need for SSR.
Pre-rendering is not a silver bullet and has some caveats:
* Many routes - Pre-rendering is not suitable for websites with thousands of routes. Each page would have to be rendered, which can take quite some time.
* Dynamic Content - Routes that display user specific content or other dynamically fetched data, should show placeholders until the content is loaded.
## Summary (TLDR)
<useful-links>
<useful-links-section title="Markdown Based">
[Vuepress](#vuepress) - uses markdown and Vue components to build docs, blogs and more
</useful-links-section>
<useful-links-section title="Markdown Based +">
[Saber](#saber) - uses markdown, Vue components and JS files. Options for view layer.
</useful-links-section>
<useful-links-section title="Customizable">
[Nuxt](#nuxt-static-generated-mode) - statically pre-render any SSR compliant SPA, very flexible
</useful-links-section>
<useful-links-section title="GraphQL based">
[Gridsome](#gridsome) - static websites with flexible GraphQL data layer for any backend
</useful-links-section>
<useful-links-section title="Manual">
[Prerender SPA Plugin](#prerender-spa-plugin) - low level prerendering plugin
</useful-links-section>
<useful-links-section title="Webpack + Plugin">
[Poi + vue-static](#poi-+-vue-static) - leverage pre-rendering for each route at build time
</useful-links-section>
</useful-links>
## Existing Solutions
Even though you can create such a tool with Puppeteer and a simple script, there are already battle tested solutions that can work for the majority of use cases.
## Vuepress <badge text="popular"/>
Vuepress is a prime example of a static file generator. Each page is a markdown file that is then rendered to an HTML page, and runs as an SPA once a page is loaded. Vuepress 0.x websites are meant mainly for documentations, as the default theme is optimized for such.
The new 1.x version will be a more generic static file generator, suitable for building blogs and more. Its new plugin based system allows for a much wider range of extensions, on top of the already available offline mode, Algolia search integration to name a few.
<useful-links>
<useful-links-section title="Useful Links">
* [Official Docs](https://vuepress.vuejs.org/guide/#how-it-works)
* [Documentation Platforms](./documentation.md#vuepress) - Vuepress as a documentation platform.
* [Vuepress.gallery](https://vuepress.gallery/) - A gallery of Vuepress themes.
</useful-links-section>
<useful-links-section title="Tutorials">
* [The VuePress Book](https://vuepressbook.com/) - examples and demo code
* [Vue-Powered Docs & Blog](https://snipcart.com/blog/vuepress-tutorial-vuejs-documentation)
* [Build A Documentation System with Vue and VuePress](https://scotch.io/tutorials/zero-to-deploy-build-a-documentation-system-with-vue-and-vuepress)
</useful-links-section>
</useful-links>
## Gridsome <badge text="rising star"/>
Gridsome is a Vue.js-powered, static site generator for building fast websites. It works with any Headless CMS, API or Database by using a GraphQL Data Layer. Once visited, Vue.js hydrates the page, converting it into a full blown SPA.
To learn more, go check out the [Gridsome](./gridsome.md) page.
<useful-links>
<useful-links-section title="Official">
* [Gridsome documentation](https://gridsome.org/)
* [Gridsome repository](https://github.com/gridsome/gridsome)
* [Gridsome chat on Discord](https://discord.gg/daeay6n)
</useful-links-section>
<useful-links-section title="Tutorials">
* [How does Gridsome compare to Nuxt?](https://github.com/gridsome/gridsome/issues/193)
* [Getting Started with Gridsome](https://scotch.io/tutorials/getting-started-with-gridsome)
* [Leveraging Vue.js & GraphQL with Gridsome](https://snipcart.com/blog/vuejs-graphql-airtable-example)
* [Building a blog with Gridsome: Creating the Blog](https://alligator.io/vuejs/gridsome-blog/)
</useful-links-section>
</useful-links>
## Prerender SPA Plugin
A webpack plugin that is used to generate static HTML files for each web page, defined in its configuration. Opposed to the previous two solutions, this one is framework agnostic, meaning it is not limited to just Vue powered websites.
<useful-links>
<useful-links-section title="Useful Links">
* [GitHub](https://github.com/chrisvfritz/prerender-spa-plugin)
* [Vue CLI Plugin](https://github.com/SolarLiner/vue-cli-plugin-prerender-spa)
</useful-links-section>
<useful-links-section title="Tutorials">
* [How to Pre-render Vue.js Powered Websites with Webpack](https://markus.oberlehner.net/blog/how-to-pre-render-vue-powered-websites-with-webpack/)
</useful-links-section>
</useful-links>
## Nuxt Static Generated mode <badge text="popular"/>
Most people know Nuxt for its Server-side rendering capabilities, it however also supports pre-rendering. The `nuxt generate` command will save the output of each page in your Nuxt app to an HTML file. After visiting, the page will go into SPA mode, with Vue taking over routing and page rendering.
<useful-links>
<useful-links-section title="Tutorials">
* [Static Sites Powered By Nuxt and AWS](https://dev.to/smitjel/static-sites-powered-by-nuxt-and-aws-2hp7)
* [Nuxt docs](https://nuxtjs.org/guide#static-generated-pre-rendering-).
</useful-links-section>
</useful-links>
### NuxtPress <badge text="newcomer"/>
NuxtPress is an addon for [Nuxt](#nuxt-static-generated-mode) (thus it also supports pre-rendering) which adds the ability to create Nuxt pages as `.md` files.
There currently exist 3 modes: `docs`, `blog` & `slides` (experimental) and so it is already quite versatile.
Since it's just a Nuxt module, one major benefit is that you have all the power and flexibility of vanilla Nuxt (and its ecosystem) at your fingertips.
<useful-links>
<useful-links-section title="Official">
* [NuxtPress documentation](https://nuxt.press/en/guide/)
* [NuxtPress repository](https://github.com/nuxt/press)
</useful-links-section>
<useful-links-section title="Articles">
* [The story of NuxtPress](https://hire.jonasgalvez.com.br/2019/aug/19/the-story-of-nuxtpress/)
</useful-links-section>
</useful-links>
## Poi + vue-static
Using the vue-static plugin for Poi by EGOIST, you can leverage pre-rendering for each route of your SPA at build time. You need to give it a map of your dynamic routes and it will do the rest. Keep in mind it uses vue-server-renderer, so all limitations of SSR will apply here as well (no window object so on).
This approach is useful for simpler applications, which when bundled with Poi, can get pre-rendering almost for free.
<useful-links>
<useful-links-section title="Official">
[Poi Docs](https://poi.js.org/guide/plugin-vue-static.html#install)
</useful-links-section>
</useful-links>
## Saber
Saber.js is a framework for building Modern Static Websites, also built by EGOIST. You can think of it as Gridsome or Gatsby but without the GraphQL part. It is very easy to get started with, like Nuxt.js it uses file-system as the routing API and it supports `.md` and `.vue` pages out of the box, however you can also add pages programmatically. Saber has first-class support for blogging, theming, i18n and page transition, it's also highly extensible thanks to the plugin system.
For now Saber only works with Vue.js, but React support is planned for the future.
<useful-links>
<useful-links-section title="Official">
[Saber Docs](https://saber.land)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/testing.md
================================================
# Testing Vue apps
Testing has always been a scary topic for beginners. Vue being a framework and most often working with `.vue` files has its specifics when it comes to unit testing. The tooling around Vue tries to make the testing experience as painless as possible.
E2E tests however, follow the same path as any other modern web application, so its up to you to choose a tool to test with.
**Tip:** If you are using Vue-CLI, it comes with Unit and E2E testing setup out of the box, so you dont have to setup anything.
## TLDR
1. Use Vue CLI to setup your projects
2. Choose Cypress for e2e tests
3. Choose Jest for unit tests
4. Use Vue Test Utils as a utility testing library
## Most popular testing setups
Vue does not have a specific testing framework of its own, but most people are using [Jest](jestjs.io/) as their unit testing framework of choice. It has an easy to remember API, flexible assertion mechanics and with a large community behind it, you can find many plugins and solutions to common problems.
### Books
If you want to read a book about testing you can give our [Vue Testing Books](../learning/books.md#testing) page a look.
### Courses and more
There are many tutorials and courses out there, however we will show a few that are very well written and considered a "must read".
<useful-links>
<useful-links-section title="Vue Related">
* [Vue Test Utils](https://vue-test-utils.vuejs.org/guides/) - **The official Vue Test Utils guides**. Full of tips on how to test using Vue Test Utils, Jest, Mocha and more.
* [Vue Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/) - A very well written and focused book on testing Vue apps with Vue Test Utils by Vue Test Utils maintainer.
* [afontcu.dev](https://afontcu.dev/) - A very well written blog, full of testing tips and tutorials, authored by Vue Test Utils maintainer.
* [An Introduction To Vue Testing With Jest ](https://www.youtube.com/watch?v=Fbo4pttBZ9k) - Video tutorial on Unit testing with Jest and Vue Test Utils
* [Unit Test Your First Vue.js Component](https://frontstuff.io/unit-test-your-first-vuejs-component) - A very well written introduction to testing Vue Components.
* [Knowing what to test](https://vuejsdevelopers.com/2019/08/26/vue-what-to-unit-test-components/) - A guide on what to test in a Vue component for maximum efficiency.
</useful-links-section>
<useful-links-section title="General Testing">
* [Ui testing best practices](https://github.com/NoriSte/ui-testing-best-practices) - A collection of best practices and tips when testing UI.
* [Gentle Introduction to Javascript TDD](https://jrsinclair.com/articles/2016/gentle-introduction-to-javascript-tdd-intro/) - A very nicely written multi-part introduction to testing JavaScript in general
* [Test Driven Development in Vue with Cypress](https://www.youtube.com/watch?v=MU7K_V6rFjM) - Talk on Test Driven Development with Cypress.
* [Static vs Unit vs Integration vs E2E Testing for Frontend Apps](https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests/) - Answer to the long answered question (uses React but concepts are the same)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/ecosystem/ui-libraries.md
================================================
# UI Libraries
_"Which UI library is the best"_ stands among the most common questions from newcomers to Vue.js ecosystem. The answer isn't easy though, since there is no such thing as "the best" components library for Vue, due to many factors that should be considered. What you can look for instead is a solution optimal for your specific use case.
Most of the libraries covered in this chapter are based on either Material Design or Ant Design, or provide Vue integrations for some framework agnostic UI libraries, such as Bootstrap, Bulma or Uikit.
<useful-links>
<useful-links-section title="Tutorials">
[Roundup: Vue.js Desktop Web App Component Libraries](https://alligator.io/vuejs/roundup-desktop-components)
</useful-links-section>
</useful-links>
## Summary (TLDR)
If you don't have time to read all of this and just need a quick answer:
<useful-links>
<useful-links-section title="Users choice">
* [Vuetify](#vuetify) - mobile and desktop ready, material design
* [Quasar](#quasar) - material design as well but with cross-platform capabilities
</useful-links-section>
<useful-links-section title="Any platform">
* [Quasar](#quasar) - full framework, option of Cordova or Capacitor for mobile builds
* [Ionic Vue](#ionic-vue) - cross-platform UI toolkit, uses Capacitor for native mobile
</useful-links-section>
<useful-links-section title="Desktop focused">
- [Element UI](#element-ui) - extensive, desktop oriented, widely popular in asia
- [iView](#iview)
</useful-links-section>
<useful-links-section title="Easy if familiar">
* [BootstrapVue](#bootstrapvue) - Bootstrap based
* [Buefy](#buefy) - Bulma based
</useful-links-section>
<useful-links-section title="Most flexible">
* [Tailwind](#tailwind-css)
</useful-links-section>
</useful-links>
## How to chose an optimal UI library
This section is supposed to contain the guidelines on how to decide which UI library to use.
Here are some topics that should be covered:
- do you really need an UI library?
- how do you plan to approach mobile version of your website or application
- are you fine with a library that doesn't provide comprehensive support and large community
- what components are crucial for your project
- how important is SEO for your project, do you plan to use server side rendering?
- accessibility
## Material Design
Material Design is a very popular design concept not only in Vue.js world. Combining flat visual style with shadows and other lightning effects, it was primarily created with Android mobile applications in mind, but is widely used on traditional websites too.
The components in libraries such as [Vuetify](#vuetify) or [Vue-Material](#vue-material) look good by default, but since they were written with a certain design style in mind, they're not fully customizable. However, the new Material Design 2 specification brought more focus on flexible theming and we can expect the libraries to follow this move in 2019.
<useful-links>
<useful-links-section title="Official">
* [Material Design documentation](https://material.io/)
</useful-links-section>
</useful-links>
### Vuetify <badge text="Popular"/>
> Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze. Build amazing applications with the power of Vue, Material Design and a massive library of beautifully crafted components and features.
Vuetify is praised not only for a wide selection of components, but also for the way it's maintained. Currently it's developed by a full team of developers and it's got a big and well organized community. The project is funded via Patreon and Open Collective.
The library's ecosystem provides multiple tools, such as theme generator, Webpack loader or opinionated Eslint config. It's also easy to implement Vuetify in your application thanks to provided plugins for Vue CLI and Nuxt.
Internally, Vuetify is written with Typescript. The upcoming release of Vuetify 2 with improved theme system, accessibility and performance, will also bring the move from Stylus to SASS.
<useful-links>
<useful-links-section title="Official">
* [Vuetify repository](https://github.com/vuetifyjs/vuetify)
* [Vuetify documentation](https://vuetifyjs.com/en/)
* [Vuetify chat on Discord](https://community.vuetifyjs.com/)
</useful-links-section>
</useful-links>
### Quasar <badge text="Popular"/>
> A massive pool of quality components ready for dropping directly into your existing or new projects today.
Plus an easy to use build process, fully configurable (although 99% of the time you won't even need to touch it)... following all of the latest and greatest best web practices. Jumpstart a SPA, PWA, SSR, Mobile App or Desktop app in 30 seconds... (yes, it's that easy to get started!)
Quasar's emphasis is on a great developer experience. It offers its own CLI, which helps users with building applications for multiple platforms, including mobile apps via Cordova, desktop apps via Electron and PWAs or SPAs with or without Server Side Rendering (SSR). It has a growing community and a great team of developers, who are contributing a lot of time towards the project.
One of the features that sets Quasar apart from practically all other frameworks is its Application Extension System (or AE for short), where devlopers can not only use AE system for importing general code for their own projects, but can also share that same code with the general Quasar community. It's a powerful system, which allows Quasar projects to be extended with any number of different additions like with other components, additions of CLI commands and even application features. One great example is QCalendar - an intricate component for creating calendars.
<useful-links>
<useful-links-section title="Official">
* [Quasar repositories](https://github.com/quasarframework)
* [Quasar documentation](https://quasar.dev)
* [The QCalendar Component](https://github.com/quasarframework/app-extension-qcalendar)
* [List of Availabe App Extensions](https://quasar.dev/app-extensions/discover)
* [Quasar chat on Discord](https://chat.quasar.dev)
* [Forum](https://forum.quasar.dev)
</useful-links-section>
</useful-links>
### Vue Material
> Simple, lightweight and built exactly according to the Google Material Design specs.
The difference in popularity is big, but if you're looking for a library that follows Material Design principles to the letter, give it a try.
<useful-links>
<useful-links-section title="Official">
* [Vue Material repository](https://github.com/vuematerial/vue-material)
* [Vue Material documentation](https://vuematerial.io/)
* [Vue Material chat on Discord](https://discord.gg/vuematerial)
</useful-links-section>
</useful-links>
## Ant Design
Ant Design is kind of the opposite of previously mentioned Material Design. The libraries following this specification are meant to be used primarily on desktop, so their responsive design support is scarce.
The reason? Just like Material Design was created by Google, AntD is brought by designers from Alibaba - the largest e-commerce company in China. It's specifically targeted towards the Chinese web market, where traditional websites aren't usually accessed on mobile devices. Such libraries often provide separate solutions for mobile applications, based on a separate And Design Mobile specification.
This also means that they are maintained mainly by Chinese developers and it may be more difficult to get help in English.
Other than standard websites, Ant Design is a good choice for developers writing all kinds of administration systems.
<useful-links>
<useful-links-section title="Official">
* [Ant Design documentation](https://ant.design/)
* [Ant Design Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce/)
</useful-links-section>
</useful-links>
### Element UI <badge text="Popular for Desktop"/>
In the worldwide context, Element UI is the most popular UI library for Vue.js and one of the oldest in the ecosystem. It also comes with a mobile sibling - Mint UI that can be used to write a hybrid application. It's got proper English documentation and a secondary international chat, but most of the Github issues are in Chinese.
Element UI provides starter kits for both general usage and Laravel projects, as well as Typescript bindings. There's a rich choice of components available and they can be imported on demand. The styles are written using SCSS with BEM methodology.
The library's success resulted in porting Element UI to Angular and React ecosystems.
<useful-links>
<useful-links-section title="Official">
* [Element UI repository](https://github.com/ElemeFE/element)
* [Element UI documentation](https://element.eleme.io/)
* [Element UI chat on Gitter](https://gitter.im/element-en/Lobby)
</useful-links-section>
</useful-links>
### iView
While not as well-known as Element UI, iView is a valid, well maintained alternative. It provides a large set of components which we can import on demand and useful tools to make working with them easier, together with Typescript support and the official admin panel template. It's a good choice especially if you prefer to work with LESS over SASS.
<useful-links>
<useful-links-section title="Official">
* [iView repository](https://github.com/iview/iview)
* [iView documentation](https://iviewui.com)
</useful-links-section>
</useful-links>
## Component sets for CSS Frameworks
Third group of UI libraries includes those that provide sets of components for traditional CSS frameworks. Both those which originally contain Javascript features, such as Bootstrap, Semantic UI or UIKit, and the purely CSS ones like Bulma. It's a good option if you're looking for some specific design style, you're already familiar with the CSS framework or you want to rewrite an already existing application that uses one of them.
Remember that you will still have to reach out to original framework's documentation and community for help, especially with styling.
### BootstrapVue <badge text="Backender's Choice"/>
> BootstrapVue provides one of the most comprehensive implementations of Bootstrap V4.3 components and grid system available for Vue.js 2.6+, complete with extensive and automated WAI-ARIA accessibility markup.
If you want to use Bootstrap 4 for your project, BootstrapVue is the community's most often recommendation. It's a set of components natively written with Vue.js, so you don't have to worry about mixing Vue with JQuery. It's easy to use it with both Vue CLI and Nuxt.
BootstrapVue also includes several custom components based on Bootstrap v4 styling.
<useful-links>
<useful-links-section title="Official">
* [Bootstrap-Vue repository](https://github.com/bootstrap-vue/bootstrap-vue)
* [Bootstrap-Vue documentation](https://bootstrap-vue.org/)
* [Bootstrap-Vue chat on Discord](https://discordapp.com/invite/j2Mtcny)
</useful-links-section>
</useful-links>
### Buefy
Bulma grew up to be one of top CSS frameworks, but unlike most of them, it doesn't offer any Javascript functionality. That's where Buefy comes into play. It provides both a set of components and an easy way to integrate Bulma into your project.
Buefy's versions are synchronized with Bulma, so you can be sure that same versions of both frameworks are fully compatible with each other.
<useful-links>
<useful-links-section title="Official">
* [Buefy repository](https://github.com/buefy/buefy)
* [Buefy documentation](https://buefy.org/)
* [Buefy chat on Discord](https://discordapp.com/invite/ZkdFJMr)
</useful-links-section>
</useful-links>
### Vuikit
Vuikit is a Vue integration library that provides wrappers for [Uikit](https://getuikit.com/) framework. While not as well-known in Vue.js ecosystem as Bootstrap or Bulma, Uikit is a robust library that covers a wide variety of CSS & JS components, with some unique features that you won't find elsewhere out of the box.
<useful-links>
<useful-links-section title="Official">
* [Vuikit repository](https://github.com/vuikit/vuikit)
* [Vuikit documentation](https://vuikit.js.org/)
* [UIkit chat on Gitter](https://gitter.im/uikit/uikit)
</useful-links-section>
</useful-links>
### Semantic-UI-Vue
Despite its popularity, [Semantic UI](https://semantic-ui.com/) never really hit it off in Vue.js ecosystem. There were a few projects trying to bring good integration with Vue though. Out of them, the most noteworthy is Semantic-UI-Vue, inspired by a similar project from the React ecosystem.
<useful-links>
<useful-links-section title="Official">
* [Semantic-UI-Vue repository](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue)
* [Semantic-UI-Vue documentation](https://semantic-ui-vue.github.io)
* [Semantic-UI-Vue chat on Gitter](https://gitter.im/Semantic-UI-Vue)
</useful-links-section>
</useful-links>
### Vectre
[Specter.CSS](https://picturepan2.github.io/spectre/) is a lightweight, responsive and modern CSS framework for faster and extensible development. The hallmark of this framework is its tiny size and consistent design language. But up to this point, there has been no full implementation of most of the components in any ecosystem. This was the motivation to create a fast, small and user friendly Vectre framework that will have modern features like typescript/tsx support, tree shaking, multiple JavaScript module systems and of course tiny size.
<useful-links>
<useful-links-section title="Official">
* [vectre repository](https://github.com/vectrejs/vectre)
* [vectre documentation](https://vectrejs.github.io/docs/)
* [vectre chat on Discord](https://discord.gg/4YTfpB)
</useful-links-section>
</useful-links>
### PrimeVue
[PrimeVue](https://www.primefaces.org/primevue/showcase/) is an advanced UI component library for Vue featuring 60+ rich set of components, a theme designer, various theme alternatives such as Material, Bootstrap, FluentUI, VueCLI templates and professional support. All widgets are open source and free to use under MIT License.
PrimeVue is developed by [PrimeTek Informatics](https://www.primetek.com.tr), a vendor with years of expertise in developing open source UI solutions including PrimeFaces, PrimeNG and PrimeReact
<useful-links>
<useful-links-section title="Official">
* [PrimeVue repository](https://github.com/primefaces/primevue)
* [PrimeVue documentation](https://www.primefaces.org/primevue/showcase/)
</useful-links-section>
</useful-links>
### Kendo UI for Vue
[Kendo UI for Vue](https://www.telerik.com/kendo-vue-ui) is a professionally built commercial UI library with 90+ components that is built for business applications. It provides [high-quality learning resources](https://www.telerik.com/kendo-vue-ui/components/) and an [award-winning technical support](https://www.telerik.com/best-tech-support). The components are fully responsive and accessible with support for multiple design systems like Kendo Default, Material Design, Bootstrap and the ability to create a custom variety of theme in [Theme Builder](https://themebuilder.telerik.com/kendo-vue-ui).
In [Telerik](https://www.telerik.com/) we've been solving this problem for the past 18 years across many development platforms, which now include four JavaScript frameworks.
<useful-links>
<useful-links-section title="Official">
* [Kendo UI for Vue repository](https://github.com/telerik/kendo-vue)
* [Kendo UI for Vue documentation](https://www.telerik.com/kendo-vue-ui/components/)
</useful-links-section>
</useful-links>
## Other solutions
### Tailwind CSS <badge text="Most Flexible"/>
> A utility-first CSS framework for rapidly building custom user interfaces.
Tailwind is very well accepted in the Vue community as it integrates very nicely with the concept of components. Integration is as simple as installing Tailwind and creating a config and importing it in your app.
<useful-links>
<useful-links-section title="Official">
* [Tailwind Docs](https://tailwindcss.com/docs/what-is-tailwind/)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Using Tailwind with Vue.js](https://flaviocopes.com/vue-tailwind/)
* [How to use Tailwind CSS in Vue together with CSS Modules](https://stefanzweifel.io/posts/how-to-use-tailwind-css-in-vue-together-with-css-modules)
</useful-links-section>
</useful-links>
### VueSax
The goal of VueSax is to provide an UI library focused on core JS functionality. While it offers a default design based on warm color palette, doesn't depend on any specific design language or CSS framework and by default uses native CSS variables rather than preprocessors.
Despite being less known than its mainstream competitors, VueSax has a track of consistent maintainment and managed to get a reputation of a stable UI solution.
<useful-links>
<useful-links-section title="Official">
* [VueSax repository](https://github.com/lusaxweb/vuesax)
* [VueSax documentation](https://lusaxweb.github.io/vuesax/)
* [VueSax chat on Discord](https://discord.gg/9dsKtvB)
</useful-links-section>
</useful-links>
### Inkline <badge type="success" text="Developer Experience"/>
> Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications.
Inkline provides you with over 50 customizable components, hundreds of utility classes, and built-in schema-based Form Validation. The framework has been chosen as a finalist for the Open Source Awards at Vue.js London 2019, in the Developer Experience category.
<useful-links>
<useful-links-section title="Official">
* [Inkline repository](https://github.com/inkline/inkline)
* [Inkline documentation](https://inkline.io/)
* [Inkline chat on Discord](https://discord.gg/2w5UGnK)
</useful-links-section>
</useful-links>
### Ionic Vue <badge text="Web Native"/>
> A native Vue version of Ionic Framework that makes it easy to build apps for iOS, Android, and the web as a Progressive Web App. Our components allow developers to build native experiences, all while using web technology.
Ionic is an open source UI toolkit focused on building high quality cross platform apps. Originally built for Angular and already one of the most popular frameworks in the world, the latest release now supports Vue 3 as well as React thanks to their [move to native web components](https://blog.ionicframework.com/introducing-ionic-4-ionic-for-everyone) in version 4. The Ionic team reports the framework powers roughly [15% of all mobile apps](https://appfigures.com/top-sdks/development/apps).
<useful-links>
<useful-links-section title="Official">
* [Ionic Vue components](https://ionicframework.com/docs/components)
* [Ionic Vue documentation](https://ionicframework.com/docs/vue/overview)
* [Ionic Vue forum](https://forum.ionicframework.com/c/ionic/vue/29)
</useful-links-section>
<useful-links-section title="Tutorials">
* [Your First Ionic Vue App](https://ionicframework.com/blog/new-tutorial-your-first-ionic-vue-app)
</useful-links-section>
</useful-links>
### Vuetensils
> A "naked" component library for building accessible, lightweight, on-brand applications.
Rather than a full-fledged framework, Vuetensils offers a set of base components that you can use to create your own UI system. It takes care of the raw JS functionality and accessibility, with only a minimal amount of default styling.
<useful-links>
<useful-links-section title="Official">
* [Vuetensils repository](https://github.com/stegosource/vuetensils)
* [Vuetensils documentation](https://vuetensils.stegosource.com)
</useful-links-section>
</useful-links>
### Chakra UI
Chakra is a Vue version of a popular UI library for React, with focus on accessibility. It makes use of [Styled System](https://styled-system.com/) which allows to declare CSS style properties directly via props, with a constrained set of utility classes.
While it depends on CSS-in-JS under the hood, you don't need to know it in order to use the library.
<useful-links>
<useful-links-section title="Official">
* [Chakra UI repository](https://github.com/chakra-ui/chakra-ui-vue)
* [Chakra UI documentation](https://vue.chakra-ui.com/)
</useful-links-section>
</useful-links>
================================================
FILE: docs/guide/learning/blogs.md
================================================
# Blogs
Finding the right place where you can read quality Vue articles, or even submit your own is not as easy as one might think.
The list below includes some of the best resources for general web development articles as well as specialized Vue blogs.
## The Vue Point <badge text="Official"/>
[The Vue Point](https://medium.com/the-vue-point) is the official Vue.js blog on Medium. Expect articles directly from the Vue Core team or Evan You himself about new features, upcoming updates and more.
## Vue.js Developers <badge text="popular"/>
[Vue.js Developers](http://vuejsdevelopers.com/) is a blog originally started by Anthony Gore and is one of best resources for both beginner and seasoned Vue developers. Nowadays it's maintained by Anthony along with a community of writers, pushing articles on a weekly basis. Users are also able to submit articles, that get published after a reviewing process.
It's got its own active Slack community and well maintained profiles across popular social media platforms.
## Alligator.io <badge text="popular"/>
[Alligator.io](https://alligator.io/) is a blog related to general Web development, with categories spanning across CSS, general JavaScript, and frameworks like Vue, React amd Angular.
Its collection of Vue.js articles is worth reading, touching everything from beginner to the more advanced topics.
## VueSchool Articles
[VueSchool Articles](https://vueschool.io/articles/) - By now you probably know about VueSchool's courses on teaching Vue. Did you know they also have a blog? Some of the articles are
authored by the same tutors that do the courses so you can expect top notch quality there as well.
They write about beginner as well as more advanced topics like Testing, Component design and more.
## CSS-Tricks
[CSS-Tricks Articles](https://css-tricks.com/tag/vue/) - CSS-Tricks is well known for its awesome demos and well written explanations and tutorials. Their blog is no exception, with Vue tutorials and articles, some of which are written by popular Vue enthusiasts, like Sarah Drasner her self.
## Scotch.io
[Scotch.io](https://scotch.io/tag/vue) - Scotch.io is a very popular learning platform on a wide range topics like Vue, React, Angular, Node, Laravel and much more. Their blog is where they post articles from top notch developers around to world.
## Dev.to
[Dev.to](https://dev.to/t/vue) is an online community for sharing and discovering great ideas, having debates, and making friends. Anyone can share articles, questions, discussions about general development. They allow cross-posting from other sources as well, as long as you have rights to the content.
There are new Vue articles on a weekly basis, which are worth checking out.
## ITNEXT
[ITNEXT.IO](https://itnext.io/) is a Medium based blog for ITNEXT software developers, engineers, IT architects, system engineers and IT Managers to share their knowledge and ideas, helping them connect, collaborate and learn with other people.
They release well written Vue articles, along with other good material.
## Pusher
[Pusher Blog](https://pusher.com/tutorials?q=vuejs) is a platform that offers APIs to build real-time apps. You can find plenty of Vue related articles that show how you can use Vue with their APIs to build complex applications.
## The Road To Enterprise
[The Road To Enterprise](https://theroadtoenterprise.com/blog) - is a platform that, besides technical ebooks, has a blog with various technical programming concepts covering frameworks and tools such as Vue.js, Nuxt, JavaScript, CSS, React, Next, ECMAScript, Node, Testing, Vite, Tailwindcss, and more.
## Personal Blogs
This list consists of personal developer blogs, where people share their Vue related problems and solutions.
- [Markus Oberlehner](https://markus.oberlehner.net/blog/) - Vue.js, JavaScript, CSS, Test Driven Development and Front-End Architecture. Unique articles and interesting problem resolutions.
- [Adri Fontcu](https://medium.com/@afontcu) - Frontend development, CSS, UX, design, lean, agile and everything in between.
- [Tiago Alves](https://medium.com/@tiagoreisalves) - Vue.js, NativeScript, Weex, Mobile App Development
- [Ben Hong](https://medium.com/@bencodezen) - Vue.js, Frontend development, CSS,
- [Ivan Sieder](https://simedia.tech/blog/) - Vue.js, Frontend development
- [Dobromir Hristov](https://medium.com/@dobromir_hristov/) - Vue.js, Frontend development
- [Michael Thiessen](http://michaelnthiessen.com/) - Vue.js, Frontend development
- [Bo Andersen](https://codingexplained.com/tag/vue) - Vue.js, Frontend development. Unique articles and interesting problem resolutions.
- [Raymond Camden](https://www.raymondcamden.com/tags/vuejs) - Vue.js, JavaScript, Frontend development and serverless.
- [Taha Shashtari](https://tahazsh.com/) - Vue.js, JavaScript, CSS, Frontend development.
- [Alexander Lichter](https://blog.lichter.io/?ref=vuecommunity-guide) - Nuxt.js, Vue.js, JavaScript, Clean Code, Refactoring, SEO, Frontend, Tooling and Performance.
- [Jonas Galvez](https://hire.jonasgalvez.com.br) - JavaScript, Nuxt.js, Distributed Systems.
- [Michael Gallagher](https://medium.com/@mike_17305) - Vue.js, Vuex, Javascript, Frontend development.
#### If you write articles on Vue, feel free to make a PR and include your blog!
================================================
FILE: docs/guide/learning/books.md
================================================
# Books
This page lists popular books about Vue development that focus on a single topic, like testing or larger scope, like building a whole application.
<useful-links>
<useful-links-section title="Useful Links">
[Top 10 Vue JS Books You Should Read](https://dev.to/heshanfu/top-10-vue-js-books-you-should-read-240c)
</useful-links-section>
</useful-links>
## Testing
These books are mostly focused on the concept of testing components and full blown applications. Even though include steps on building an application, that is not their main goal.
### Testing Vue.js Applications
**Author:** Edd Yerburgh
> A comprehensive guide to Vue.js testing by the author of the official testing utility.
Testing Vue.js Applications is a comprehensive guide to testing Vue components, events and more.
Author Edd Yerburgh, creator of the official Vue testing utility, explains the best testing practices in Vue, like mocking dependencies, testing and mocking a Vuex Store, Vue Router, mixins, along with general tips for testing any web application.
The book makes the assumption the reader is a novice Vue developer as it spends a good part of each section explaining in detail what will be done and how.
<useful-links>
<useful-links-section title="Link">
[Testing Vue.js Applications](https://www.manning.com/books/testing-vue-js-applications)
</useful-links-section>
</useful-links>
### Testing Vue.js components with Jest
**Author:** Alex Jover Morales
> A concise and practical guide to unit test your Vue.js components using Jest, the fully featured JavaScript testing framework.
The book is a very nice resource for learning testing VUe components using Jest and the official library vue-test-utils. It goes over how to mock dependencies with Jest, component snapshot testing, best practices for styling and structuring tests, and more.
<useful-links>
<useful-links-section title="Link">
[Testing Vue.js components with Jest](https://leanpub.com/testingvuejscomponentswithjest)
</useful-links-section>
</useful-links>
## Building Applications
These books are more focused on the app building aspect, thus go deeper into the topic with tips and more detailed examples.
### The Majesty of Vue.js 2
**Authors:** Alex Kyriakidis, Kostas Maniatis
> This book will guide you through the path of the rapidly spreading Javascript Framework Vue.js!
By the end of this book, you will be able to create fast front end applications and increase the performance of your existing projects with Vue.js 2 integration.
This book is addressed to anyone interested in learning Vue.js, from new developers, to those who already use Vue.js and want to expand their knowledge. The book does not assume ES2015 knowledge and does not make use of Vue CLI or vue components throughout the entire book.
<useful-links>
<useful-links-section title="Link">
[The Majesty of Vue.js 2](https://leanpub.com/vuejs2)
</useful-links-section>
</useful-links>
### Fullstack Vue
**Authors:** Hassan Djirdeh, Nate Murray, Ari Lerner
> Fullstack Vue is a tutorial-driven book that will have you writing Vue apps in no time.
Each chapter of the book comes with its own specific coding challenge, a complete project, which covers all the concepts of the said chapter. examples for building Vue applications are included through out the chapters, along with best practices when communicating with an API.
Included with the book is a 2h Screencast on how to setup and deploy a Vue application.
<useful-links>
<useful-links-section title="Link">
[Fullstack Vue](https://www.fullstack.io/vue/)
</useful-links-section>
</useful-links>
### Vue.js 2 Web Development Projects
**Author:** Guillaume Chau
> A project-based, practical guide to get hands-on into Vue.js 2.5 development by building beautiful, functional and performant web applications
This book is written by Vue core team member Guillaume Chau - Akryum, maintainer of Vue-CLI, Vue-Devtools, Vue Apollo, among others.
Book goes through basics like directives, adding animations to applications, multi page routing, building an online store and finally a real-time dashboard with Vue and Meteor.
<useful-links>
<useful-links-section title="Link">
[Vue.js 2 Web Development Projects](https://www.packtpub.com/web-development/vuejs-2-web-development-projects)
</useful-links-section>
</useful-links>
### Vue.js in Action
**Authors:** Erik Hanchett, Benjamin Listwon
> Carefully explains the foundational concepts for understanding what Vue is doing and why.
The book starts off by exploring the reactive UI model. Then, it goes deeper by showing how to build a shopping cart with an admin interface and the ability to manage stock! By the end, the reader expands their app, adding transitions, tests, and other key features until it’s production ready.
<useful-links>
<useful-links-section title="Link">
[Vue.js in Action](https://www.manning.com/books/vue-js-in-action)
</useful-links-section>
</useful-links>
### Vue.js: Up and Running
**Author:** Callum Macrae
> Brisk introduction to building fast, interactive single-page web applications with Vue.js.
The book is a practical guide that goes from basics of Vue development, to custom components, advanced features like using JSX in Vue components. The author shows how to use vue-router for routing, vuex for state management, and vue-test-utils for testing.
<useful-links>
<useful-links-section title="Link">
[Vue.js: Up and Running](https://shop.oreilly.com/product/0636920103455)
</useful-links-section>
</useful-links>
### Vue.js 2 Book
**Author:** Nathan Wu
> Learn by building practical Vue.js applications
Throughout four chapters, instructor Nathan Wu will show you how to build practical Vue applications from scratch, using Laravel 5 and Bootstrap 4. You'll also learn about building many real-world features: Vue single-file components, CRUD operations, form validations, JWT authentication, APIs, etc.
By the end of this book, you'll gain a solid understanding of Vue and how it interacts with a Laravel backend.
<useful-links>
<useful-links-section title="Link">
[Vue.js 2 Book](https://vuejsbook.com/)
</useful-links-section>
</useful-links>
### Full-Stack Vue.js 2 and Laravel 5
**Author:** Anthony Gore
> Learn to build professional full-stack web apps with Vue.js and Laravel
Written by Vuejsdevelopers.com creator - Anthony Gore, this book begins with a thorough introduction to Vue.js and its core concepts like data binding, directives and computed properties, with example projects after each chapter.
Readers will then use Laravel to set up a web service and integrate the front end into a full-stack app. It goes over best-practice development workflow using tools like Webpack, Laravel Mix, Laravel Passport and deploying to Heroku.
<useful-links>
<useful-links-section title="Link">
[Full-Stack Vue.js 2 and Laravel 5](https://www.packtpub.com/application-development/full-stack-vuejs-2-and-laravel-5)
</useful-links-section>
</useful-links>
### The Vue Handbook
**Author:** Flavio Copes
<useful-links>
<useful-links-section title="Link">
[The Vue Handbook](https://vuehandbook.com/)
</useful-links-section>
</useful-links>
### Building Forms with Vue.js
**Author**: Marina Mosti
> Learn how to build dynamic schema-driven forms with Vue from scratch
This book builds upon a sample registration form, starting from the basics of component composition all the way through to having a complete schema driven, validated, and global state powered form. Each chapter builds upon the concepts learned in the previous ones, but allows the user to skip ahead to the topics of interest. It serves as a reference and learning experience from the very basics to the most advanced concepts.
<useful-links>
<useful-links-section title="Link">
[Building Forms with Vue.js](https://www.amazon.com/Building-Forms-Vue-js-Patterns-building-ebook/dp/B07YY7MGDD)
</useful-links-section>
</useful-links>
### Become a Ninja with Vue 3
**Author**: Cédric Exbrayat
> Learn how to build complete applications with Vue.js 3
This ebook is addressed to anyone interested in learning Vue 3, from new developers, to those who already use Vue.js 2.x. The book starts with learning ES2015, TypeScript, to building components with the Composition API, then covers the most useful libraries (Vue Router, Vue Test Utils, etc.),
the new features of Vue 3 (Suspense, Teleport), before ending with advanced topics, like how Vue works under the hood, performance tips, and how to ship an application to production. The readers that want to code along the ebook can follow the exercises available, to build a full application step by step.
You can pay what you want for this ebook, and give part of the price to support the Vue team. Available in English and in French.
<useful-links>
<useful-links-section title="Link">
[Become a Ninja with Vue 3](https://books.ninja-squad.com/vue)
</useful-links-section>
</useful-links>
### Vue - The Road To Enterprise
**Author**: Thomas Findlay
> Take your skills to the next level and become a Vue pro by mastering advanced patterns, best practices, and cutting-edge techniques for the development of Vue 2 & 3 applications.
"Vue - The Road To Enteprise" is a book that revolves around best practices, advanced patterns and techniques for the development of Vue app
gitextract_46wadhmg/ ├── .github/ │ └── FUNDING.yml ├── .gitignore ├── README.md ├── docs/ │ ├── .vuepress/ │ │ ├── components/ │ │ │ ├── UsefulLinks.vue │ │ │ └── UsefulLinksSection.vue │ │ ├── config.js │ │ ├── public/ │ │ │ ├── _redirects │ │ │ └── favicons/ │ │ │ ├── browserconfig.xml │ │ │ └── site.webmanifest │ │ ├── styles/ │ │ │ └── index.styl │ │ └── theme-styling/ │ │ ├── _media-query.scss │ │ ├── _variables.scss │ │ └── utils.scss │ ├── README.md │ ├── guide/ │ │ ├── README.md │ │ ├── community/ │ │ │ ├── README.md │ │ │ ├── adopt-vue-at-work.md │ │ │ ├── conferences.md │ │ │ ├── diversity.md │ │ │ ├── job-market.md │ │ │ ├── meetups.md │ │ │ └── social-media.md │ │ ├── ecosystem/ │ │ │ ├── boilerplates.md │ │ │ ├── build-tools.md │ │ │ ├── client-server-communication.md │ │ │ ├── contributing.md │ │ │ ├── desktop-apps.md │ │ │ ├── documentation.md │ │ │ ├── editors-and-tools.md │ │ │ ├── forms.md │ │ │ ├── gridsome.md │ │ │ ├── hosting.md │ │ │ ├── i18n.md │ │ │ ├── legacy.md │ │ │ ├── mobile-apps.md │ │ │ ├── nuxt.md │ │ │ ├── projects-worth-mentioning.md │ │ │ ├── server-side-rendering.md │ │ │ ├── static-site-generators.md │ │ │ ├── testing.md │ │ │ └── ui-libraries.md │ │ └── learning/ │ │ ├── blogs.md │ │ ├── books.md │ │ ├── courses.md │ │ ├── faq.md │ │ ├── how-to-learn-vue.md │ │ ├── learning-platforms.md │ │ ├── official-documentation.md │ │ ├── podcasts.md │ │ ├── tips-from-mentors.md │ │ ├── vue-3.md │ │ └── workshops.md │ └── multilingual/ │ └── spanish.md └── package.json
Condensed preview — 54 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (278K chars).
[
{
"path": ".github/FUNDING.yml",
"chars": 96,
"preview": "# These are supported funding model platforms\n\ngithub: dobromir-hristov\nko_fi: dobromir_hristov\n"
},
{
"path": ".gitignore",
"chars": 19,
"preview": "node_modules\n.idea\n"
},
{
"path": "README.md",
"chars": 380,
"preview": "# Vue Community\n\nThis is the source code repo for [vue-community.org](https://vue-community.org).\n\n## Contribution\n\nIf y"
},
{
"path": "docs/.vuepress/components/UsefulLinks.vue",
"chars": 386,
"preview": "<template>\n <div class=\"UsefulLinks\">\n <slot/>\n </div>\n</template>\n\n<script>\n/**\n * @module UsefulLinks\n */\nexport "
},
{
"path": "docs/.vuepress/components/UsefulLinksSection.vue",
"chars": 1830,
"preview": "<template>\n <div class=\"UsefulLinksSection\">\n <div class=\"UsefulLinksSection__title\">\n {{ title }}\n </div>\n "
},
{
"path": "docs/.vuepress/config.js",
"chars": 4669,
"preview": "const autometaOptions = {\n image: false,\n site: {\n name: 'Vue Community'\n },\n canonical_base: 'https://vue-commun"
},
{
"path": "docs/.vuepress/public/_redirects",
"chars": 183,
"preview": "https://vuecommunity.netlify.com/* https://vue-community.org/:splat 301!\n\n# Redirect domain aliases to primary domain\nht"
},
{
"path": "docs/.vuepress/public/favicons/browserconfig.xml",
"chars": 255,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig>\n <msapplication>\n <tile>\n <square150x150logo"
},
{
"path": "docs/.vuepress/public/favicons/site.webmanifest",
"chars": 468,
"preview": "{\n \"name\": \"Vue Comunity\",\n \"short_name\": \"Vue Comunity\",\n \"icons\": [\n {\n \"src\": \"/favicons/a"
},
{
"path": "docs/.vuepress/styles/index.styl",
"chars": 245,
"preview": ".content\n blockquote {\n color: #575757\n border-left-color: #bbc3d1\n background: #f5f5f5;\n }\n\n#app .home .hero"
},
{
"path": "docs/.vuepress/theme-styling/_media-query.scss",
"chars": 3550,
"preview": "$mq-mobile-portrait: 320px !default;\n$mq-mobile-landscape: 480px !default;\n$mq-tablet-portrait: 768px !default;\n$mq-tabl"
},
{
"path": "docs/.vuepress/theme-styling/_variables.scss",
"chars": 426,
"preview": "$color-primary: #3eaf7c;\n$color-white: hsl(0, 0%, 100%);\n$color-white-ter: hsl(0, 0%, 93%);\n$color-white-bis: hsl(0, 0%,"
},
{
"path": "docs/.vuepress/theme-styling/utils.scss",
"chars": 48,
"preview": "@import \"./variables\";\n@import \"./media-query\";\n"
},
{
"path": "docs/README.md",
"chars": 1279,
"preview": "---\nhome: true\nactionText: Get Started →\nactionLink: /guide/\nheroImage: /logo_full.svg\nheroAlt: Vue Community Guide\nhero"
},
{
"path": "docs/guide/README.md",
"chars": 3205,
"preview": "# Sitemap\n\n## Community\n* [Conferences](./community/conferences.md) - Information about past Vue conferences\n* [Meetups]"
},
{
"path": "docs/guide/community/README.md",
"chars": 26,
"preview": "# Vue Community Ecosystem\n"
},
{
"path": "docs/guide/community/adopt-vue-at-work.md",
"chars": 5672,
"preview": "---\ntitle: Adopting Vue at work\n---\n\n# Making a case for Vue at your company\n\nSelling the idea to use Vue.js in the upco"
},
{
"path": "docs/guide/community/conferences.md",
"chars": 1444,
"preview": "# Conferences\n\n<useful-links>\n<useful-links-section title=\"Video archive\">\n\n- [Vue Conference Videos By Vue Mastery](htt"
},
{
"path": "docs/guide/community/diversity.md",
"chars": 3104,
"preview": "# Diversity and Inclusion\n\nDiversity and inclusion are important shared values in the Vue.js community. There are severa"
},
{
"path": "docs/guide/community/job-market.md",
"chars": 5291,
"preview": "# Job Market\n\nShort info about the current Vue.js job market and its growth in the past years.\n\n## VueJobs <badge text=\""
},
{
"path": "docs/guide/community/meetups.md",
"chars": 2174,
"preview": "# Meetups and Events\n\nMeetups and Events hold a crucial role in building a strong community. Both newcomers and seasoned"
},
{
"path": "docs/guide/community/social-media.md",
"chars": 6824,
"preview": "# Media\n\n## Official Chat\n\nOfficial Vue.js chat on Discord gathers thousands of developers from around the world. Among "
},
{
"path": "docs/guide/ecosystem/boilerplates.md",
"chars": 7885,
"preview": "# Boilerplates\nBoilerplates are pre-configured projects, that are meant to give a good head start when building larger a"
},
{
"path": "docs/guide/ecosystem/build-tools.md",
"chars": 9882,
"preview": "# Build Tools\nModern web applications are often a mix of custom written modules and third party packages, written in var"
},
{
"path": "docs/guide/ecosystem/client-server-communication.md",
"chars": 7605,
"preview": "# Client Server Communication\n\nWhen working with SPA's it is very common to fetch data from remote services. This allows"
},
{
"path": "docs/guide/ecosystem/contributing.md",
"chars": 396,
"preview": "# Contributing\n\n## Contributing\n\n<useful-links>\n<useful-links-section title=\"Official links\">\n\n- [Join the Vue.js Commun"
},
{
"path": "docs/guide/ecosystem/desktop-apps.md",
"chars": 6644,
"preview": "# Desktop Apps\n\nVue is not limited to just developing web and [native mobile](./mobile-apps.md) applications, it allows "
},
{
"path": "docs/guide/ecosystem/documentation.md",
"chars": 13829,
"preview": "# Documentation Platforms\n\nDocumentation is a very important part of any software, especially if it is going to be used "
},
{
"path": "docs/guide/ecosystem/editors-and-tools.md",
"chars": 12953,
"preview": "# Editors and Tools\n\nChoosing a proper tool for the job is always hard. Thankfully Vue's popularity has grown enough for"
},
{
"path": "docs/guide/ecosystem/forms.md",
"chars": 9654,
"preview": "---\ntitle: Handling Forms\n---\n\n# Forms\n\nVue.js comes with a lot of features that make working with forms easier out of t"
},
{
"path": "docs/guide/ecosystem/gridsome.md",
"chars": 11,
"preview": "# Gridsome\n"
},
{
"path": "docs/guide/ecosystem/hosting.md",
"chars": 8230,
"preview": "# Hosting\n\nChoosing a proper hosting for a Vue.js website can be frustrating. To choose a proper hosting provider, you n"
},
{
"path": "docs/guide/ecosystem/i18n.md",
"chars": 4844,
"preview": "# I18n\n\nMaking a website internationalized (i18n) is a common task, but it is something that trips most developers into "
},
{
"path": "docs/guide/ecosystem/legacy.md",
"chars": 172,
"preview": "# Legacy Packages\n\n::: contribute\n:::\n\nHere we list popular Vue libraries that have had their time of fame and glory and"
},
{
"path": "docs/guide/ecosystem/mobile-apps.md",
"chars": 13446,
"preview": "# Mobile Apps\n\nBuilding mobile applications with JavaScript is not a new thing and has been around for quite some time n"
},
{
"path": "docs/guide/ecosystem/nuxt.md",
"chars": 199,
"preview": "# Nuxt\n\n::: contribute\n:::\n\n- should i learn vue first\n- who is nuxt for\n- what projects are good for nuxt\n- advantages "
},
{
"path": "docs/guide/ecosystem/projects-worth-mentioning.md",
"chars": 534,
"preview": "# Projects Worth Mentioning\nThese are projects that we just dont have a category for, but are absolutely worth mentionin"
},
{
"path": "docs/guide/ecosystem/server-side-rendering.md",
"chars": 9792,
"preview": "# Server Side Rendering\n\nServer side rendering can be explained as moving the process of rendering pages of an SPA from "
},
{
"path": "docs/guide/ecosystem/static-site-generators.md",
"chars": 8213,
"preview": "# Static Site Generators\n\nStatic site generators are tools that allow Single-page applications to be pre-rendered as HTM"
},
{
"path": "docs/guide/ecosystem/testing.md",
"chars": 3177,
"preview": "# Testing Vue apps\n\nTesting has always been a scary topic for beginners. Vue being a framework and most often working wi"
},
{
"path": "docs/guide/ecosystem/ui-libraries.md",
"chars": 20217,
"preview": "# UI Libraries\n\n_\"Which UI library is the best\"_ stands among the most common questions from newcomers to Vue.js ecosyst"
},
{
"path": "docs/guide/learning/blogs.md",
"chars": 5331,
"preview": "# Blogs\n\nFinding the right place where you can read quality Vue articles, or even submit your own is not as easy as one "
},
{
"path": "docs/guide/learning/books.md",
"chars": 10173,
"preview": "# Books\nThis page lists popular books about Vue development that focus on a single topic, like testing or larger scope, "
},
{
"path": "docs/guide/learning/courses.md",
"chars": 5343,
"preview": "# Video courses\nShowcase individual Vue related video courses. Platforms go into the [learning platforms](./learning-pla"
},
{
"path": "docs/guide/learning/faq.md",
"chars": 29495,
"preview": "# Frequently Asked Questions\n\nBelow is a collection of the most commonly asked questions that new Vue developers have.\n\n"
},
{
"path": "docs/guide/learning/how-to-learn-vue.md",
"chars": 16992,
"preview": "# How to Learn Vue\n\nAs with any technology, its best to start with the official documentation, in this case the [Vue.js "
},
{
"path": "docs/guide/learning/learning-platforms.md",
"chars": 7104,
"preview": "# Learning platforms\n\n## Vue Specific\nA Vue specific learning platform is one that is solely focused on getting you up a"
},
{
"path": "docs/guide/learning/official-documentation.md",
"chars": 4511,
"preview": "# Official Documentation\n\nThe official documentation for Vue.js is divided into several parts, spread across multiple we"
},
{
"path": "docs/guide/learning/podcasts.md",
"chars": 1745,
"preview": "# Podcasts\n\n## Vue News\n[Vue.js News](https://news.vuejs.org/) is the official Vue.js podcast accompanying the weekly Vu"
},
{
"path": "docs/guide/learning/tips-from-mentors.md",
"chars": 1577,
"preview": "# Tips from Mentors\nThis chapter will give you an insight from Vue experts on how they began with Vue, how they approach"
},
{
"path": "docs/guide/learning/vue-3.md",
"chars": 3134,
"preview": "# Vue 3\n\nVue 3 has arrived!\n\n## Upgrading\n\n<useful-links>\n<useful-links-section title=\"Official\">\n\n* [Migration Guide](h"
},
{
"path": "docs/guide/learning/workshops.md",
"chars": 2668,
"preview": "# Workshops\n\n Workshops are hands on practical events, where seasoned experts teach a group of attendees about a certain"
},
{
"path": "docs/multilingual/spanish.md",
"chars": 397,
"preview": "---\nsidebar: auto\n---\n\n# Spanish Vue resources\n\n## Learning\nLinks to books, courses, learning platforms and other learni"
},
{
"path": "package.json",
"chars": 477,
"preview": "{\n \"name\": \"vue-community\",\n \"version\": \"0.0.1\",\n \"description\": \"\",\n \"scripts\": {\n \"docs:dev\": \"vuepress dev doc"
}
]
About this extraction
This page contains the full source code of the dobromir-hristov/vuecommunity GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 54 files (261.9 KB), approximately 63.7k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.