├── .gitignore ├── docs ├── guide │ ├── ecosystem │ │ ├── gridsome.md │ │ ├── legacy.md │ │ ├── nuxt.md │ │ ├── contributing.md │ │ ├── projects-worth-mentioning.md │ │ ├── testing.md │ │ ├── i18n.md │ │ ├── desktop-apps.md │ │ ├── client-server-communication.md │ │ ├── boilerplates.md │ │ ├── hosting.md │ │ ├── static-site-generators.md │ │ ├── server-side-rendering.md │ │ ├── forms.md │ │ ├── build-tools.md │ │ ├── editors-and-tools.md │ │ ├── mobile-apps.md │ │ └── documentation.md │ ├── community │ │ ├── README.md │ │ ├── conferences.md │ │ ├── meetups.md │ │ ├── diversity.md │ │ ├── job-market.md │ │ ├── adopt-vue-at-work.md │ │ └── social-media.md │ ├── learning │ │ ├── tips-from-mentors.md │ │ ├── podcasts.md │ │ ├── workshops.md │ │ ├── vue-3.md │ │ ├── official-documentation.md │ │ ├── blogs.md │ │ ├── courses.md │ │ ├── learning-platforms.md │ │ └── books.md │ └── README.md ├── .vuepress │ ├── theme-styling │ │ ├── utils.scss │ │ ├── _variables.scss │ │ └── _media-query.scss │ ├── public │ │ ├── cover.png │ │ ├── logo_pin.png │ │ ├── logo_full.png │ │ ├── favicons │ │ │ ├── favicon.ico │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── mstile-144x144.png │ │ │ ├── mstile-150x150.png │ │ │ ├── mstile-310x150.png │ │ │ ├── mstile-310x310.png │ │ │ ├── mstile-70x70.png │ │ │ ├── apple-touch-icon.png │ │ │ ├── android-chrome-192x192.png │ │ │ ├── android-chrome-512x512.png │ │ │ ├── browserconfig.xml │ │ │ ├── site.webmanifest │ │ │ └── safari-pinned-tab.svg │ │ ├── _redirects │ │ └── logo_full.svg │ ├── styles │ │ └── index.styl │ ├── components │ │ ├── UsefulLinks.vue │ │ └── UsefulLinksSection.vue │ └── config.js ├── multilingual │ └── spanish.md └── README.md ├── .github └── FUNDING.yml ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/gridsome.md: -------------------------------------------------------------------------------- 1 | # Gridsome 2 | -------------------------------------------------------------------------------- /docs/guide/community/README.md: -------------------------------------------------------------------------------- 1 | # Vue Community Ecosystem 2 | -------------------------------------------------------------------------------- /docs/.vuepress/theme-styling/utils.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | @import "./media-query"; 3 | -------------------------------------------------------------------------------- /docs/.vuepress/public/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/cover.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: dobromir-hristov 4 | ko_fi: dobromir_hristov 5 | -------------------------------------------------------------------------------- /docs/.vuepress/public/logo_pin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/logo_pin.png -------------------------------------------------------------------------------- /docs/.vuepress/public/logo_full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/logo_full.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/mstile-144x144.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/mstile-150x150.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/mstile-310x150.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/mstile-310x310.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/mstile-70x70.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dobromir-hristov/vuecommunity/HEAD/docs/.vuepress/public/favicons/android-chrome-512x512.png -------------------------------------------------------------------------------- /docs/.vuepress/public/_redirects: -------------------------------------------------------------------------------- 1 | https://vuecommunity.netlify.com/* https://vue-community.org/:splat 301! 2 | 3 | # Redirect domain aliases to primary domain 4 | https://vuecommunity.org/* https://vue-community.org/:splat 301! 5 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/legacy.md: -------------------------------------------------------------------------------- 1 | # Legacy Packages 2 | 3 | ::: contribute 4 | ::: 5 | 6 | Here we list popular Vue libraries that have had their time of fame and glory and are now either not actively 7 | developed or obsolete. 8 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/nuxt.md: -------------------------------------------------------------------------------- 1 | # Nuxt 2 | 3 | ::: contribute 4 | ::: 5 | 6 | - should i learn vue first 7 | - who is nuxt for 8 | - what projects are good for nuxt 9 | - advantages of nuxt 10 | - modules 11 | - a nuxtpress section 12 | - ecosystem 13 | - vue-cli and other tools -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #ffffff 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | .content 2 | blockquote { 3 | color: #575757 4 | border-left-color: #bbc3d1 5 | background: #f5f5f5; 6 | } 7 | 8 | #app .home .hero img 9 | max-height 135px; 10 | 11 | .theme-default-content:not(.custom) { 12 | & > h1, h2, h3, h4, h5, h6 { 13 | margin-left: -1rem; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Community 2 | 3 | This is the source code repo for [vue-community.org](https://vue-community.org). 4 | 5 | ## Contribution 6 | 7 | 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. 8 | 9 | All help is welcome as the project is only getting bigger. 10 | -------------------------------------------------------------------------------- /docs/multilingual/spanish.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: auto 3 | --- 4 | 5 | # Spanish Vue resources 6 | 7 | ## Learning 8 | Links to books, courses, learning platforms and other learning resources in Spanish. 9 | 10 | ### Video 11 | 12 | * [Introducción a Vue en Scrimba](https://scrimba.com/playlist/pDzVxUd) Mini curso introductorio a Vue.js 13 | 14 | 15 | ## Ecosystem 16 | Links to tutorials in Spanish on specific parts of the ecosystem, like Nuxt, Vue-Nativescript, build tools and others. 17 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Contributing 4 | 5 | 6 | 7 | 8 | - [Join the Vue.js Community!](https://v3.vuejs.org/community/join.html) 9 | - [Vue.js Contributing Guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md) 10 | 11 | 12 | 13 | 14 | ### How to write your own library 15 | 16 | ### Why NOT to write your own library 17 | 18 | ::: contribute 19 | ::: 20 | -------------------------------------------------------------------------------- /docs/.vuepress/theme-styling/_variables.scss: -------------------------------------------------------------------------------- 1 | $color-primary: #3eaf7c; 2 | $color-white: hsl(0, 0%, 100%); 3 | $color-white-ter: hsl(0, 0%, 93%); 4 | $color-white-bis: hsl(0, 0%, 95%); 5 | $color-gray: hsl(0, 0%, 42%); 6 | $color-gray-light: hsl(215, 14%, 84%); 7 | 8 | $border-default-color: $color-gray-light; 9 | 10 | $box-shadow: 0 1px 3px 0 hsla(232, 23%, 47%, 0.2); 11 | 12 | $spacing-tiny: .5rem; 13 | $spacing-small: .75rem; 14 | $spacing: 1rem; 15 | $spacing-medium: 1.25rem; 16 | $spacing-large: 1.5rem; 17 | $spacing-xlarge: 2rem 18 | -------------------------------------------------------------------------------- /docs/.vuepress/components/UsefulLinks.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-community", 3 | "version": "0.0.1", 4 | "description": "", 5 | "scripts": { 6 | "docs:dev": "vuepress dev docs", 7 | "docs:build": "vuepress build docs" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "vuepress": "^1.8.2", 13 | "vuepress-plugin-container": "^2.1.5" 14 | }, 15 | "devDependencies": { 16 | "@vuepress/plugin-google-analytics": "^1.8.2", 17 | "node-sass": "^6.0.1", 18 | "sass-loader": "^10.2.0", 19 | "vuepress-plugin-autometa": "^0.1.13" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/projects-worth-mentioning.md: -------------------------------------------------------------------------------- 1 | # Projects Worth Mentioning 2 | These are projects that we just dont have a category for, but are absolutely worth mentioning. 3 | 4 | ## Vue Storefront 5 | 6 | [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. 7 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Vue Comunity", 3 | "short_name": "Vue Comunity", 4 | "icons": [ 5 | { 6 | "src": "/favicons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/favicons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | actionText: Get Started → 4 | actionLink: /guide/ 5 | heroImage: /logo_full.svg 6 | heroAlt: Vue Community Guide 7 | heroText: 8 | features: 9 | - title: Community 10 | details: Find information about the various Vue community projects, conferences or the current job market. 11 | - title: Learning 12 | details: Dive deeper into the many possible ways to learn Vue.js, from official documentation to books and video courses. 13 | - title: Ecosystem 14 | details: Explore popular tools and libraries like Nuxt, Vuetify or Vuepress. Learn about their specific use cases and differences. 15 | footer: MIT Licensed 16 | --- 17 | 18 | Welcome to a beginner's guide to Vue.js community and ecosystem, written and maintained by the community itself. 19 | 20 | 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. 21 | 22 | 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. 23 | -------------------------------------------------------------------------------- /docs/guide/learning/tips-from-mentors.md: -------------------------------------------------------------------------------- 1 | # Tips from Mentors 2 | This chapter will give you an insight from Vue experts on how they began with Vue, how they approach learning new technologies and other helpful tips. 3 | 4 | ## Dobromir Hristov 5 | I started learning Vue back when it was v0.12, at the time the main learning resources were the docs, the forum and Laracasts. Hard times, but even then, the docs were very good, with enough examples to get you started. 6 | 7 | I began tinkering with some basic applications, but without a proper scope or any previous reactive framework experience, it was hard to escape from old habits. 8 | **TIP:** think of a nice, yet simple idea for an app, one that you can expand further as you progress. With a clear idea, tasks fly a lot smoother. 9 | 10 | I split with a colleague a few courses and books, like Laracasts and Majesty of Vue, which helped with further increasing our confidence when writing modern applications. 11 | **TIP:** if you feel a course is worth it, but it would break the bank, ask your boss to help or split the expenses with a colleague/friend. I've done this a few times while learning. 12 | 13 | As I began to delve a bit deeper into OSS, bundlers, transpilers, etc, I faced the same problem as before, a lot of information, scattered all over the place. 14 | **TIP:** don't be afraid to open a library's `src` files and check how it works. Often times methods or properties are unintentionally left out from the docs. Check tests, if they have any, as those could give you a more clear idea on how certain features work. I often looked into ESLint and Babel presets to find out what they include. 15 | -------------------------------------------------------------------------------- /docs/guide/community/conferences.md: -------------------------------------------------------------------------------- 1 | # Conferences 2 | 3 | 4 | 5 | 6 | - [Vue Conference Videos By Vue Mastery](https://www.vuemastery.com/conferences) 7 | 8 | 9 | 10 | 11 | - [Vue.js Events](events.vuejs.org) - Official events and community portal 12 | 13 | 14 | 15 | 16 | Here we will list Vue Conferences around the world and what is unique about them. 17 | 18 | ## VueConf US 19 | 20 | Hosted by Evan You 21 | 22 | 23 | 24 | 25 | - [us.vuejs.org](https://us.vuejs.org) 26 | 27 | 28 | 29 | 30 | ## VueConf Toronto 31 | 32 | > 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 33 | 34 | 35 | 36 | 37 | - [vuetoronto.com](https://vuetoronto.com/) 38 | - [YouTube Channel](https://www.youtube.com/c/VueConfToronto) 39 | 40 | 41 | 42 | 43 | ## Vue.js Amsterdam 44 | 45 | > Vuejs Amsterdam is the Largest & Most Epic Vue Conference in the World 46 | 47 | 48 | 49 | 50 | - [vuejs.amsterdam](https://vuejs.amsterdam) 51 | - [YouTube Channel](https://www.youtube.com/c/VuejsAmsterdam) 52 | 53 | 54 | 55 | 56 | ## Vue.js London 57 | 58 | 59 | 60 | 61 | [vuejs.london](https://vuejs.london) 62 | 63 | 64 | 65 | 66 | ::: contribute 67 | ::: 68 | -------------------------------------------------------------------------------- /docs/guide/learning/podcasts.md: -------------------------------------------------------------------------------- 1 | # Podcasts 2 | 3 | ## Vue News 4 | [Vue.js News](https://news.vuejs.org/) is the official Vue.js podcast accompanying the weekly Vue Newsletter. The project aims to highlight some of the best libraries, articles, and resources from around the Vue.js community. Their goal is to help listeners succeed as developers by collecting and giving them the information they need to grow, learn, and use the latest Vue.js techniques. 5 | 6 | ## Views on Vue 7 | [Views on Vue](https://devchat.tv/views-on-vue/) is a Vue focused weekly podcast, hosted by famous contributors in the community like Chris Fritz, Divya Sasidharan, Joe Eames, with special guests being invited on a regular basis. 8 | 9 | Episodes can vary, from deep dive into Vue and its ecosystem, to more broader web development topics like testing, code automation, contributing to open source and others. Episodes are mostly free form style, around an hour long. 10 | 11 | ## Full Stack Radio 12 | [Full Stack Radio](http://www.fullstackradio.com/) is an all-around general web development podcast. Episodes are hosted by Adam Wathan along with a guest, where they talk about everything from design and user experience to testing and system administration. 13 | 14 | ## Single episodes talking about Vue 15 | Below are listed some episodes from various other podcasts that talk about Vue, but have focus on other sectors of web development. 16 | 17 | - [Spelunking into the VueJS Frontend JavaScript Framework - Devmode.fm](https://devmode.fm/episodes/spelunking-into-the-vuejs-frontend-javascript-framework#comments) 18 | - [Episode 99 - VueJs - The Cynical Developer](https://cynicaldeveloper.com/podcast/99/) 19 | - [Raju Gandhi on Vuejs and Evaluating web frameworks](https://nofluffjuststuff.com/podcast/1/raju_gandhi_on_vuejs_and_evaluating_web_frameworks) 20 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /docs/guide/community/meetups.md: -------------------------------------------------------------------------------- 1 | # Meetups and Events 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | 8 | ## Events.vuejs.org 9 | Finding or organising a local meetup in your area can be quite hard, as it involves a lot of searching, preparations, etc. 10 | 11 | [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. 12 | 13 | 14 | 15 | 16 | 17 | * [List of upcoming events](https://events.vuejs.org/events/) - Conferences, Workshops, Local Meetups 18 | * [List of local groups](https://events.vuejs.org/meetups/) - "Meetups" groups, Facebook groups, local group chats, etc. 19 | * [Handbook for Organisers](https://events.vuejs.org/resources/#organizers-handbook) - helpful tips on how ot run a meetup. 20 | * [Handbook for Speakers](https://events.vuejs.org/resources/#speakers-handbook) - Tips, list of potential topics for new speakers. 21 | 22 | 23 | 24 | 25 | ## Spread the Word 26 | 27 | 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. 28 | 29 | 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. 30 | 31 | 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. 32 | -------------------------------------------------------------------------------- /docs/.vuepress/components/UsefulLinksSection.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | 27 | 107 | -------------------------------------------------------------------------------- /docs/guide/learning/workshops.md: -------------------------------------------------------------------------------- 1 | # Workshops 2 | 3 | Workshops are hands on practical events, where seasoned experts teach a group of attendees about a certain topic. Opposed to normal events, where speaking and showcasing slides is the main activity, workshops focus more on building something under the guidance of the lecturer in exchange for shorter theoretical sessions. 4 | 5 | Workshops usually work best in smaller groups, around 15 to 20 people, with larger ones usually requiring the help of additional mentors. Downside of larger groups is that attendees cannot interact as close with the lecturer, because of the amount of people the lecturer would need to address. 6 | 7 | ## Format of a Workshop 8 | 9 | Every workshop is unique, as in each instructor decides on how to structure their event. The same workshop can be different each time it is held, depending on the attendees level, interaction and other factors. 10 | 11 | Most follow the "Explain feature first, practice after" where the main topic is split into sections, each of which is first explained in detail and then attendees are asked to practice what was just taught. 12 | 13 | Others follow the "work along with the mentor" approach, where attendees follow alongside the instructor, as he explains what the topic is about while showing how to apply it in real life. 14 | 15 | Workshops mostly range from half a day to the more in depth ones spanning across two or three days. Longer workshops, allow for instructor to dive deeper into a topic, showing a lot more than just the basic requirements to get things working. Attendees have a bigger opportunity to interact with the mentors, ask questions on issues that come up as development goes. 16 | 17 | ## Where to Find Workshops 18 | 19 | The easiest way is to check on [Events.vuejs.org - Workshops](https://events.vuejs.org/events/#workshops) as that page is officially maintained by core team members. 20 | 21 | Usually, the days before and after larger tech events are when such workshops are most commonly held. On those days, event speakers and other experts give half or full day workshops, in small to medium groups with mentors helping out where needed. 22 | 23 | These workshops are generally paid, with good discounts if you plan to attend the main event as well. Free workshops around events are also not uncommon, as they are organised by larger organisations, to help out specific groups or search for talent. 24 | 25 | If you did not find anything near you, you can check your local Vue.js group or on the various Vue community social websites. Check out [Meetups](../community/meetups.md) to find about Vue communities near you as well as [Social Media](../community/social-media.md) to start following and interacting with your preferred community. 26 | -------------------------------------------------------------------------------- /docs/guide/community/diversity.md: -------------------------------------------------------------------------------- 1 | # Diversity and Inclusion 2 | 3 | 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. 4 | 5 | For example, most Vue.js conferences offer discounted or free diversity tickets to help encourage more diverse attendance. 6 | 7 | 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. 8 | 9 | ## Vue Vixens 10 | 11 | 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. 12 | 13 | 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. 14 | 15 | 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. 16 | 17 | 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. 18 | 19 | 20 | 21 | 22 | * [Official Website](https://vuevixens.org) 23 | * [Chat on Slack](https://slackin-fxsumkvfno.now.sh/) 24 | * [Twitter profile](https://twitter.com/VueVixens) 25 | * [Blog](https://dev.to/vuevixens) 26 | 27 | 28 | 29 | 30 | ## Concatenate Conference 31 | 32 | 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). 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 39 | 40 | 41 | * [Official Website](https://concatenate.io) 42 | * [Review](https://technext.ng/2018/08/13/heres-all-went-down-concatenate-developers-conference) 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | # Sitemap 2 | 3 | ## Community 4 | * [Conferences](./community/conferences.md) - Information about past Vue conferences 5 | * [Meetups](./community/meetups.md) - Where to find meetups, tips on how to organise a local meetup 6 | * [Media](./community/social-media.md) - Popular Vue communities such as chats, forums and social platforms 7 | * [Diversity](./community/diversity.md) - Diversity and inclusion in Vue.js 8 | * [Job Market](./community/job-market.md) - How to find job with Vue.js and related topics 9 | * [Adopting Vue at work](./community/adopt-vue-at-work.md) - How to pitch Vue at your workplace 10 | 11 | ## Learning 12 | * [Official Documentation](./learning/official-documentation.md) - All the official Vue docs, listed on one place 13 | * [How to learn Vue](./learning/how-to-learn-vue.md) - Tips on how to learn Vue if coming from other technologies 14 | * [Vue 3](./community/vue-3.md) - Vue 3 learning resources and plugins 15 | * [Learning platforms](./learning/learning-platforms.md) - Learning platforms that also offer Vue.js video courses 16 | * [Video Courses](./learning/courses.md) - Popular Vue video courses 17 | * [Books](./learning/books.md) - Books about Vue development 18 | * [Blogs](./learning/blogs.md) - Popular Vue related blogs. 19 | * [Podcasts](./learning/podcasts.md) - Vue podcasts or single episodes talking about Vue 20 | * [Frequently Asked Questions](./learning/faq.md) - Answers to most common questions asked by Vue developers 21 | * [Tips from Mentors](./learning/tips-from-mentors.md) - How Vue experts began with Vue, tips on how to learn 22 | * [Workshops](./learning/workshops.md) - What are Vue workshops and where to find them 23 | 24 | ## Ecosystem 25 | * [Editors and Tools](./ecosystem/editors-and-tools.md) - List of popular code editors and setups for Vue development 26 | * [UI Libraries](./ecosystem/ui-libraries.md) - Pros and Cons of the most popular Vue UI libraries 27 | * [Handling Forms](./ecosystem/forms.md) - Libraries for handling forms with Vue 28 | * [Boilerplates](./ecosystem/boilerplates.md) - Vue boilerplates 29 | * [Client-Server Communication](./ecosystem/client-server-communication.md) - How to use Vue with REST, GraphQL or websockets 30 | * [Documentation platforms](./ecosystem/documentation.md) - Generating and maintaining documentation for Vue projects 31 | * [Hosting](./ecosystem/hosting.md) - Where to host your Vue apps 32 | * [i18n](./ecosystem/i18n.md) - Internationalization (i18n) for Vue 33 | * [Mobile Apps](./ecosystem/mobile-apps.md) - PWA, native and hybrid mobile applications 34 | * [Desktop Apps](./ecosystem/desktop-apps.md) - Building Desktop Apps with Vue 35 | * [Nuxt](./ecosystem/nuxt.md) - Overview of Nuxt.js and its ecosystem 36 | * [Server Side Rendering](./ecosystem/server-side-rendering.md) - Available tools for SSR 37 | * [Static Site Generators](./ecosystem/static-site-generators.md) - Technologies to create static sites like landing pages or blogs 38 | * [Build Tools](./ecosystem/build-tools.md) - Build tools used across Vue ecosystem 39 | * [Projects worth mentioning](./ecosystem/projects-worth-mentioning.md) - Important Vue projects that don't fit in other categories. 40 | * [Legacy Packages](./ecosystem/legacy.md) - Outdated or deprecated Vue packages and features 41 | * [Contributing](./ecosystem/contributing.md) - Notes on contributing to the ecosystem 42 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/testing.md: -------------------------------------------------------------------------------- 1 | # Testing Vue apps 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | **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. 8 | 9 | ## TLDR 10 | 11 | 1. Use Vue CLI to setup your projects 12 | 2. Choose Cypress for e2e tests 13 | 3. Choose Jest for unit tests 14 | 4. Use Vue Test Utils as a utility testing library 15 | 16 | ## Most popular testing setups 17 | 18 | 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. 19 | 20 | ### Books 21 | 22 | If you want to read a book about testing you can give our [Vue Testing Books](../learning/books.md#testing) page a look. 23 | 24 | ### Courses and more 25 | 26 | There are many tutorials and courses out there, however we will show a few that are very well written and considered a "must read". 27 | 28 | 29 | 30 | 31 | * [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. 32 | * [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. 33 | * [afontcu.dev](https://afontcu.dev/) - A very well written blog, full of testing tips and tutorials, authored by Vue Test Utils maintainer. 34 | * [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 35 | * [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. 36 | * [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. 37 | 38 | 39 | 40 | 41 | * [Ui testing best practices](https://github.com/NoriSte/ui-testing-best-practices) - A collection of best practices and tips when testing UI. 42 | * [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 43 | * [Test Driven Development in Vue with Cypress](https://www.youtube.com/watch?v=MU7K_V6rFjM) - Talk on Test Driven Development with Cypress. 44 | * [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) 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /docs/guide/learning/vue-3.md: -------------------------------------------------------------------------------- 1 | # Vue 3 2 | 3 | Vue 3 has arrived! 4 | 5 | ## Upgrading 6 | 7 | 8 | 9 | 10 | * [Migration Guide](https://v3.vuejs.org/guide/migration/introduction.html) 11 | * [Composition API Plugin for Vue 2](https://github.com/vuejs/composition-api) 12 | 13 | 14 | 15 | 16 | ## Composition API Plugins 17 | 18 | The Composition API is arguably the best new feature in Vue 3. It provides a much better way to write and share code between components, as well as plugins. 19 | 20 | Below are some of the best examples, with many more forthcoming. 21 | 22 | 23 | 24 | 25 | - [Automatically Typed, Modular and lightweight Store for Vue using the composition api with DevTools support](https://github.com/posva/pinia) 26 | - [Promises using Vue Composition API](https://github.com/posva/vue-compose-promise) 27 | - [A Vue.js composition API function to validate forms](https://github.com/logaretm/vue-use-form) 28 | - [Web APIs implemented as Vue.js composition functions](https://github.com/logaretm/vue-use-web) 29 | - [Vue Composition API composable components](https://github.com/pikax/vue-composable) 30 | - [Collection of essential Vue Composition API utils (works for Vue 2.x and 3.x)](https://github.com/antfu/vueuse) 31 | 32 | 33 | 34 | 35 | ## Articles and Tutorials 36 | 37 | Vue 3 is not yet published but we are already seeing courses and tutorials popping up. 38 | 39 | 40 | 41 | 42 | - [Vue 3 Essentials](https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/) - Composition API tutorial 43 | - [Exciting new features in Vue 3](https://vueschool.io/articles/vuejs-tutorials/exciting-new-features-in-vue-3/) - A well written tutorial on the upcoming Vue 3 features. 44 | - [Trying the Composition API in Vue 3](https://dev.to/dasdaniel/composition-api-in-vue3-2ob6) 45 | - [Thought on Vue 3 Composition API - `reactive()` considered harmful](https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c) - A nice comparison between the new `reactive` and `ref` helpers. 46 | - [Evan You previews VueJS 3.0](https://medium.com/vue-mastery/evan-you-previews-vue-js-3-0-ab063dec3547) 47 | - [An early look at the Vue 3 Composition API in the wild](https://itnext.io/an-early-look-at-the-vue-3-composition-api-in-the-wild-52619116d13) 48 | - [Compiling Vue 3 from scratch and trying the new Composition API](https://medium.com/js-dojo/compiling-vue-3-from-scratch-and-trying-the-new-composition-api-6d997f32e5b4) 49 | - [Vue 3 Cheatsheet](https://www.vuemastery.com/vue-3-cheat-sheet/) 50 | 51 | 52 | 53 | 54 | ## Talks 55 | 56 | 57 | 58 | 59 | - [Design Principals of Vue 3.0 by Evan You](https://www.youtube.com/watch?v=WLpLYhnGqPA) 60 | - [Evan You on What's Coming in Vue 3.0](https://www.youtube.com/watch?v=8Hgt9HYaCDA) 61 | 62 | 63 | 64 | 65 | ## Books 66 | 67 | 68 | 69 | 70 | - [Become a Ninja with Vue 3](https://books.ninja-squad.com/vue) 71 | - [Vue - The Road To Enterprise](https://bit.ly/3iDzjir) 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /docs/.vuepress/theme-styling/_media-query.scss: -------------------------------------------------------------------------------- 1 | $mq-mobile-portrait: 320px !default; 2 | $mq-mobile-landscape: 480px !default; 3 | $mq-tablet-portrait: 768px !default; 4 | $mq-tablet-landscape: 1024px !default; 5 | $mq-desktop: 1382px !default; 6 | 7 | // Both portrait and landscape 8 | @mixin mobile-only { 9 | @media (max-width: $mq-mobile-landscape) { 10 | @content; 11 | } 12 | } 13 | 14 | // Everything up to and including the portrait width of the phone 15 | // Since it's the smallest query it doesn't need a min 16 | @mixin mobile-portrait-only { 17 | @media (max-width: $mq-mobile-portrait) { 18 | @content; 19 | } 20 | } 21 | 22 | // Everything up to and including the mobile portrait 23 | @mixin mobile-portrait-and-below { 24 | @media (max-width: $mq-mobile-portrait) { 25 | @content; 26 | } 27 | } 28 | 29 | // Everything above and including the mobile portrait 30 | @mixin mobile-portrait-and-up { 31 | @media (min-width: $mq-mobile-portrait) { 32 | @content; 33 | } 34 | } 35 | 36 | // Everthing larger than a portrait mobile up until mobile landscape 37 | @mixin mobile-landscape-only { 38 | @media only screen and (min-width: $mq-mobile-portrait + 1) and (max-width: $mq-mobile-landscape) { 39 | @content; 40 | } 41 | } 42 | 43 | // Everything up to and including the mobile landscape width 44 | @mixin mobile-landscape-and-below { 45 | @media only screen and (max-width: $mq-mobile-landscape) { 46 | @content; 47 | } 48 | } 49 | 50 | // Everything above and including the mobile landscape width 51 | @mixin mobile-landscape-and-up { 52 | @media only screen and (min-width: $mq-mobile-portrait + 1) { 53 | @content; 54 | } 55 | } 56 | 57 | // Both the portrait and landscape width of the tablet 58 | // Larger than a landscape mobile but less than or equal to a landscape tablet 59 | @mixin tablet-only { 60 | @media only screen and (min-width: $mq-mobile-landscape + 1) and (max-width: $mq-tablet-landscape) { 61 | @content; 62 | } 63 | } 64 | 65 | // Everything larger than mobile landscape up until the portrait width of the tablet 66 | @mixin tablet-portrait-only { 67 | @media only screen and (min-width: $mq-mobile-landscape + 1) and (max-width: $mq-tablet-portrait) { 68 | @content; 69 | } 70 | } 71 | 72 | // Everything below and including the portrait width of the tablet 73 | @mixin tablet-portrait-and-below { 74 | @media only screen and (max-width: $mq-tablet-portrait) { 75 | @content; 76 | } 77 | } 78 | 79 | // Everything above and including the portrait width of the tablet 80 | @mixin tablet-portrait-and-up { 81 | @media only screen and (min-width: $mq-mobile-landscape + 1) { 82 | @content; 83 | } 84 | } 85 | 86 | // Larger than portrait but less than or equal to the landscape width 87 | @mixin tablet-landscape-only { 88 | @media only screen and (min-width: $mq-tablet-portrait + 1) and (max-width: $mq-tablet-landscape) { 89 | @content; 90 | } 91 | } 92 | 93 | // Up to and including the tablet landscape 94 | @mixin tablet-landscape-and-below { 95 | @media only screen and (max-width: $mq-tablet-landscape) { 96 | @content; 97 | } 98 | } 99 | 100 | // Everything larger than portrait tablet 101 | @mixin tablet-landscape-and-up { 102 | @media only screen and (min-width: $mq-tablet-portrait + 1) { 103 | @content; 104 | } 105 | } 106 | 107 | // Everything larger than a landscape tablet 108 | @mixin desktop-and-up { 109 | @media only screen and (min-width: $mq-tablet-landscape + 1) { 110 | @content; 111 | } 112 | } 113 | 114 | // Everything below and including the desktop 115 | @mixin desktop-and-below { 116 | @media only screen and (max-width: $mq-desktop) { 117 | @content; 118 | } 119 | } 120 | 121 | // Everything larger than a landscape tablet but less than or equal to the desktop 122 | @mixin desktop-only { 123 | @media only screen and (min-width: $mq-tablet-landscape + 1) and (max-width: $mq-desktop) { 124 | @content; 125 | } 126 | } 127 | 128 | // Retina screens have a 1.5 pixel ratio, not 2 129 | @mixin retina { 130 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 131 | @content; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /docs/guide/learning/official-documentation.md: -------------------------------------------------------------------------------- 1 | # Official Documentation 2 | 3 | The official documentation for Vue.js is divided into several parts, spread across multiple websites covering different topics or core libraries such as [Vuex](https://vuex.vuejs.org), [Vue-Router](https://router.vuejs.org) or [SSR](https://ssr.vuejs.org) guides. All these pages have offline support and can be installed on a mobile phone. 4 | 5 | ## Guide 6 | 7 | The [guide](https://vuejs.org/v2/guide) is commonly praised as one of the main reasons why new developers find Vue.js easy to pick up. It's usually the starting point for a developer interested in learning Vue. 8 | 9 | The best way to learn from the guide is by following the [Essentials](https://vuejs.org/v2/guide) section chapter by chapter. Then you can continue with [Components In-Depth](https://vuejs.org/v2/guide/components-registration.html). 10 | 11 | If you need more details on specific features, use the robust search system or browse the [API documentation](https://vuejs.org/v2/api/). 12 | 13 | ### Single File Components 14 | 15 | Everything in the guide is written with old Javascript syntax (ES5) and without any build tools required, to make it easy to gradually enhance your websites. 16 | 17 | However if you want to use `.vue` files while learning, read the [Single File Components](https://vuejs.org/v2/guide/single-file-components.html) chapter first and then start the guide from the beginning. 18 | 19 | To utilize SFC, you can create a [CodeSandbox](https://codesandbox.io/s/vue) project online or scaffold a new project locally using [Vue CLI](https://cli.vuejs.org/), which comes with its separate documentation. 20 | 21 | ### Reactivity Caveats 22 | 23 | Remember to read the [Reactivity in Depth](https://vuejs.org/v2/guide/reactivity.html) chapter which provides ways to deal with some caveats of Vue.js reactivity system, related to working with arrays and objects. This will all be solved in Vue 3 release. 24 | 25 | ## Style Guide 26 | 27 | The [Style Guide](https://vuejs.org/v2/style-guide) is a project meant to provide official best practices guidelines on how to write Vue.js code. It covers only the core library, without Vue-Router or Vuex. 28 | 29 | It contains a few sets of rules to follow, based on their priority, with the Essential set considered a bare minimum to use in production. It's still recommended to at least know the other rules even if you don't plan to use them. 30 | 31 | ### ESLint plugin 32 | 33 | The Style Guide is accompanied by an [ESLint plugin](https://github.com/vuejs/eslint-plugin-vue) that allows you to enforce the use of specific guidelines. It comes out of the box with most of Vue related scaffolding tools, including Vue CLI. 34 | 35 | ## Cookbook 36 | 37 | While the role of the guide is to teach you how to use individual features of Vue API, the [cookbook](https://vuejs.org/v2/cookbook) gathers curated recipes for common tasks and use cases. 38 | 39 | It consists of separate chapters that focus on particular concepts, such as form validation or working with external API. It's still a work in progress and you're welcome to help with new recipes. 40 | 41 | You're supposed to know the guide's content before you dive into the cookbook, the recipes may also assume knowledge of some build tools or packages from the wider Vue ecosystem. 42 | 43 | ## Examples 44 | 45 | Other than small code examples from the official website, there is also an example Github repository with a [Hackernews clone](https://github.com/vuejs/vue-hackernews-2.0) that you can check to see how to write a real Vue.js application. It uses Vue-Router, Vuex, Server Side Rendering and API integration with Firebase. 46 | 47 | If that is not enough for you, there's also a semi-official [Vue-Enterprise-Boilerplate](https://github.com/chrisvfritz/vue-enterprise-boilerplate) project, written by Chris Fritz, that showcases how you can use Vue.js in large scale applications. You can use it as a base for your new project too. 48 | 49 | ## Roadmap 50 | 51 | Other than the guides, there's also a repository with official [roadmap](https://github.com/vuejs/vue/projects/6), presenting the plans for the upcoming releases of core libraries. Like all plans, it's bound to change sometimes, so don't treat it as obligatory. 52 | 53 | ## RFCs 54 | 55 | Vue core team has recently adopted RFCs (request for comments) as the main way of managing substantial changes to the core libraries of Vue ecosystem. Each RFC Pull Request is a great place for the author to properly explain their motivations, and gather feedback from users and core team. It is, then, a fantastic tool to be aware of possible new features and breaking changes, and also to understand the reasoning behind some decisions. 56 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/i18n.md: -------------------------------------------------------------------------------- 1 | # I18n 2 | 3 | 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. 4 | 5 | You can easily add i18n to a Vue powered website by using one of the packages listed below: 6 | 7 | ## Vue I18n 8 | 9 | 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. 10 | 11 | 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. 12 | 13 | Vue I18n can be used inside Vue files as well as outside, in Router guards or Vuex, via a simple VueI18n instance export. 14 | 15 | 16 | 17 | 18 | * [Documentation](https://kazupon.github.io/vue-i18n/) 19 | * [Vue CLI plugin](https://github.com/kazupon/vue-cli-plugin-i18n) 20 | 21 | 22 | 23 | 24 | * [A Vue.js starter project for i18n websites](https://github.com/dobromir-hristov/vue-i18n-starter) 25 | * [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) 26 | * [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) 27 | 28 | 29 | 30 | 31 | * [vue-i18n-extract](https://pixari.github.io/vue-i18n-extract/) 32 | * [eslint-plugin-vue-i18n](https://eslint-plugin-vue-i18n.intlify.dev/) 33 | * [VSCode extension - Vue i18n Ally](https://github.com/antfu/vue-i18n-ally) 34 | 35 | 36 | 37 | 38 | ## Vuex-I18n 39 | 40 | Vuex-i18n is a simpler, more basic i18n package, that relies on a Vuex module to store the translation messages. 41 | 42 | It also supports lazy registration of translation strings, basic pluralisation, custom string fallback handling, dynamic parameters and inline default string definition. 43 | 44 | 45 | 46 | 47 | * [GitHub Repository](https://github.com/dkfbasel/vuex-i18n) 48 | 49 | 50 | 51 | 52 | ## Vue-I18Next 53 | 54 | > 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. 55 | 56 | 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. 57 | 58 | They offer an optional, very well integrated web service for managing translations - [locize.com](https://locize.com/) 59 | 60 | 61 | 62 | 63 | * [Documentation](https://panter.github.io/vue-i18next/) 64 | 65 | 66 | 67 | 68 | * [Deep Dive: Vue Translation with vue-i18next](https://phraseapp.com/blog/posts/vue-translation-with-vue-i18next/) 69 | 70 | 71 | 72 | 73 | ## fluent-vue 74 | 75 | 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). 76 | 77 | > 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. 78 | 79 | 80 | 81 | 82 | * [GitHub Repository](https://github.com/demivan/fluent-vue) 83 | * [Documentation](https://fluent-vue.demivan.me/) 84 | 85 | 86 | 87 | 88 | * [Fluent Syntax Guide](https://projectfluent.org/fluent/guide/) 89 | 90 | 91 | 92 | 93 | * [fluent-vue-loader](https://fluent-vue.demivan.me/integrations/webpack.html) - Webpack loader that adds support for custom blocks in SFC 94 | * [rollup-plugin-fluent-vue](https://fluent-vue.demivan.me/integrations/rollup.html) - Rollup\Vite plugin that adds support for custom blocks in SFC 95 | * [VSCode extension - Vue i18n Ally](https://github.com/lokalise/i18n-ally) 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | const autometaOptions = { 2 | image: false, 3 | site: { 4 | name: 'Vue Community' 5 | }, 6 | canonical_base: 'https://vue-community.org' 7 | } 8 | 9 | module.exports = { 10 | locales: { 11 | '/': { 12 | lang: 'en-US', 13 | title: 'Vue Community', 14 | description: 'The community guide to Vue.js' 15 | } 16 | }, 17 | plugins: [ 18 | [ 19 | '@vuepress/google-analytics', 20 | { 21 | 'ga': 'UA-29425482-12' 22 | } 23 | ], 24 | [ 25 | 'container', 26 | { 27 | type: 'contribute', 28 | before: () => `
29 |

This section could use a little bit of love.

30 |

If you're able to, please consider helping the Vue Community by contributing a PR.

31 |

You'll find a link to edit this page at the bottom.

` 32 | , 33 | after: '
' 34 | } 35 | ], 36 | ['autometa', autometaOptions] 37 | ], 38 | // serviceWorker: true, 39 | themeConfig: { 40 | algolia: { 41 | apiKey: '8c789b5d0ee680a4a383673877be347d', 42 | indexName: 'vue-community' 43 | }, 44 | logo: '/logo_pin.png', 45 | docsDir: 'docs', 46 | repo: 'https://github.com/dobromir-hristov/vuecommunity', 47 | editLinks: true, 48 | sidebarDepth: 3, 49 | locales: { 50 | '/': { 51 | label: 'English', 52 | selectText: 'Languages', 53 | editLinkText: 'Edit this page on GitHub', 54 | nav: [ 55 | { 56 | text: 'Guide', 57 | link: '/guide/' 58 | }, 59 | { 60 | text: 'Multilingual Resources', 61 | items: [ 62 | { text: 'Spanish', link: '/multilingual/spanish.md' } 63 | ] 64 | } 65 | ], 66 | sidebar: [ 67 | '/', 68 | { 69 | title: 'Community', 70 | collapsable: false, 71 | children: [ 72 | '/guide/community/conferences.md', 73 | '/guide/community/meetups.md', 74 | '/guide/community/social-media.md', 75 | '/guide/community/diversity.md', 76 | '/guide/community/job-market.md', 77 | '/guide/community/adopt-vue-at-work.md' 78 | ] 79 | }, 80 | { 81 | title: 'Learning', 82 | collapsable: false, 83 | children: [ 84 | '/guide/learning/official-documentation.md', 85 | '/guide/learning/how-to-learn-vue.md', 86 | '/guide/learning/vue-3.md', 87 | '/guide/learning/learning-platforms.md', 88 | '/guide/learning/courses.md', 89 | '/guide/learning/books.md', 90 | '/guide/learning/blogs.md', 91 | '/guide/learning/podcasts.md', 92 | '/guide/learning/faq.md', 93 | '/guide/learning/tips-from-mentors.md', 94 | '/guide/learning/workshops.md' 95 | ] 96 | }, 97 | { 98 | title: 'Ecosystem', 99 | collapsable: false, 100 | children: [ 101 | '/guide/ecosystem/editors-and-tools.md', 102 | '/guide/ecosystem/ui-libraries.md', 103 | '/guide/ecosystem/forms.md', 104 | '/guide/ecosystem/boilerplates.md', 105 | '/guide/ecosystem/client-server-communication.md', 106 | '/guide/ecosystem/documentation.md', 107 | '/guide/ecosystem/hosting.md', 108 | '/guide/ecosystem/i18n.md', 109 | '/guide/ecosystem/testing.md', 110 | '/guide/ecosystem/mobile-apps.md', 111 | '/guide/ecosystem/desktop-apps.md', 112 | '/guide/ecosystem/nuxt.md', 113 | '/guide/ecosystem/server-side-rendering.md', 114 | '/guide/ecosystem/static-site-generators.md', 115 | '/guide/ecosystem/build-tools.md', 116 | '/guide/ecosystem/projects-worth-mentioning.md', 117 | '/guide/ecosystem/legacy.md', 118 | '/guide/ecosystem/contributing.md' 119 | ] 120 | } 121 | ] 122 | } 123 | } 124 | }, 125 | head: [ 126 | ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/favicons/apple-touch-icon.png' }], 127 | ['link', { rel: 'icon', type: 'image/,png', sizes: '32x32', href: '/favicons/favicon-32x32.png' }], 128 | ['link', { rel: 'icon', type: 'image/,png', sizes: '16x16', href: '/favicons/favicon-16x16.png' }], 129 | ['link', { rel: 'manifest', href: '/favicons/site.webmanifest' }], 130 | ['link', { rel: 'mask-icon', href: '/favicons/safari-pinned-tab.svg', color: '#5bbad5' }], 131 | ['link', { rel: 'shortcut icon', href: '/favicons/favicon.ico' }], 132 | ['meta', { name: 'msapplication-TileColor', content: '#ffffff' }], 133 | ['meta', { name: 'msapplication-config', content: '/favicons/browserconfig.xml' }], 134 | ['meta', { name: 'theme-color', content: '#ffffff' }], 135 | ['meta', { property: 'og:image', content: '/cover.png' }], 136 | ['meta', { property: 'twitter:image:src', content: 'https://vue-community.org/cover.png' }] 137 | ] 138 | } 139 | -------------------------------------------------------------------------------- /docs/.vuepress/public/logo_full.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/guide/community/job-market.md: -------------------------------------------------------------------------------- 1 | # Job Market 2 | 3 | Short info about the current Vue.js job market and its growth in the past years. 4 | 5 | ## VueJobs 6 | 7 | [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. 8 | 9 | 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). 10 | 11 | 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. 12 | 13 | A significant percentage of the income is distributed to the authors of both Vue.js and key ecosystem projects. 14 | 15 | 16 | 17 | 18 | * [Official website](https://vuejobs.com) 19 | * [Chat on Discord](https://discord.gg/kVqcTzj) 20 | 21 | 22 | 23 | 24 | * [List of 300 VueJS Interview Questions And Answers](https://github.com/sudheerj/vuejs-interview-questions) 25 | * [Vue js Interview questions and answers](https://www.onlineinterviewquestions.com/vue-js-interview-questions/) 26 | 27 | 28 | 29 | 30 | ## Other Platforms 31 | 32 | ### StackOverflow 33 | [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. 34 | 35 | ### JSRemotely 36 | [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. 37 | 38 | ## What Skills are Employers Looking for in Vue Developers 39 | 40 | > 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. 41 | 42 | ## Tips from the Employers' Side 43 | 44 | 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. 45 | 46 | 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. 47 | 48 | ### Dobromir Hristov - Vue Bulgaria speaker and organiser 49 | 50 | 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. 51 | 52 | No one is expecting you to know them all, but the more you know, the better first impression you will make. 53 | 54 | - 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. 55 | - 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? 56 | - Mobile Device Framework - Should you go with a PWA, Native code compiled or Cordova Hybrid app. Pro's and Cons of each. 57 | - Large Form Handling - How to handle large, complicated forms, reuse common logic across components, data validation. 58 | - Code Reusability - Methods of sharing code across components - Mixins, Factories, Services, Store Actions, Utility Functions, these can make a big difference in large applications. 59 | - 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. 60 | - Code Documentation - Ways of documenting components and related code - `JSDOC`, `.ts` definitions, Component usage examples like using Storybook 61 | - 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. 62 | - Basic Webpack Knowledge - Knowing how Webpack works and to setup its build chain is always a plus, even when using Vue CLI. 63 | - Code Optimisation - Dynamic Imports (when does it make sense), Code Speed Optimisation, Time to first paint, General Page Speed Optimisations, Working on slow networks. 64 | - Cross Browser compatibility - Polyfilling, Ponyfilling and graceful fallback for older browsers that your app supports. 65 | 66 | 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. 67 | 68 | A few general advices wen applying to any job ad: 69 | 70 | - Don't answer interview questions with just one word. Explain very briefly why you chose that answer. 71 | - 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. 72 | - 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. 73 | -------------------------------------------------------------------------------- /docs/guide/learning/blogs.md: -------------------------------------------------------------------------------- 1 | # Blogs 2 | 3 | Finding the right place where you can read quality Vue articles, or even submit your own is not as easy as one might think. 4 | 5 | The list below includes some of the best resources for general web development articles as well as specialized Vue blogs. 6 | 7 | ## The Vue Point 8 | 9 | [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. 10 | 11 | ## Vue.js Developers 12 | 13 | [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. 14 | 15 | It's got its own active Slack community and well maintained profiles across popular social media platforms. 16 | 17 | ## Alligator.io 18 | 19 | [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. 20 | 21 | Its collection of Vue.js articles is worth reading, touching everything from beginner to the more advanced topics. 22 | 23 | ## VueSchool Articles 24 | [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 25 | authored by the same tutors that do the courses so you can expect top notch quality there as well. 26 | 27 | They write about beginner as well as more advanced topics like Testing, Component design and more. 28 | 29 | ## CSS-Tricks 30 | [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. 31 | 32 | ## Scotch.io 33 | [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. 34 | 35 | ## Dev.to 36 | [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. 37 | 38 | There are new Vue articles on a weekly basis, which are worth checking out. 39 | 40 | ## ITNEXT 41 | [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. 42 | 43 | They release well written Vue articles, along with other good material. 44 | 45 | ## Pusher 46 | [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. 47 | 48 | ## The Road To Enterprise 49 | [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. 50 | 51 | ## Personal Blogs 52 | This list consists of personal developer blogs, where people share their Vue related problems and solutions. 53 | 54 | - [Markus Oberlehner](https://markus.oberlehner.net/blog/) - Vue.js, JavaScript, CSS, Test Driven Development and Front-End Architecture. Unique articles and interesting problem resolutions. 55 | 56 | - [Adri Fontcu](https://medium.com/@afontcu) - Frontend development, CSS, UX, design, lean, agile and everything in between. 57 | 58 | - [Tiago Alves](https://medium.com/@tiagoreisalves) - Vue.js, NativeScript, Weex, Mobile App Development 59 | 60 | - [Ben Hong](https://medium.com/@bencodezen) - Vue.js, Frontend development, CSS, 61 | 62 | - [Ivan Sieder](https://simedia.tech/blog/) - Vue.js, Frontend development 63 | 64 | - [Dobromir Hristov](https://medium.com/@dobromir_hristov/) - Vue.js, Frontend development 65 | 66 | - [Michael Thiessen](http://michaelnthiessen.com/) - Vue.js, Frontend development 67 | 68 | - [Bo Andersen](https://codingexplained.com/tag/vue) - Vue.js, Frontend development. Unique articles and interesting problem resolutions. 69 | 70 | - [Raymond Camden](https://www.raymondcamden.com/tags/vuejs) - Vue.js, JavaScript, Frontend development and serverless. 71 | 72 | - [Taha Shashtari](https://tahazsh.com/) - Vue.js, JavaScript, CSS, Frontend development. 73 | 74 | - [Alexander Lichter](https://blog.lichter.io/?ref=vuecommunity-guide) - Nuxt.js, Vue.js, JavaScript, Clean Code, Refactoring, SEO, Frontend, Tooling and Performance. 75 | 76 | - [Jonas Galvez](https://hire.jonasgalvez.com.br) - JavaScript, Nuxt.js, Distributed Systems. 77 | 78 | - [Michael Gallagher](https://medium.com/@mike_17305) - Vue.js, Vuex, Javascript, Frontend development. 79 | 80 | 81 | #### If you write articles on Vue, feel free to make a PR and include your blog! 82 | -------------------------------------------------------------------------------- /docs/guide/community/adopt-vue-at-work.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adopting Vue at work 3 | --- 4 | 5 | # Making a case for Vue at your company 6 | 7 | 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. 8 | 9 | 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. 10 | 11 | ## Strongest points of Vue.js 12 | 13 | - Easy to get started with 14 | - Easily readable components 15 | - Progressively embeddable into websites 16 | - Can work without build tools 17 | 18 | ## In defense of Vue.js 19 | 20 | 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. 21 | 22 | ### Argument against Vue 23 | 24 | *Short description of the argument and its variants* 25 | 26 | Reasoning against it and data to back it up. 27 | 28 | ### Vue.js lacks the backing of a big company and is a one man project 29 | 30 | *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.* 31 | 32 | ### It's more difficult to find a good Vue.js developer 33 | 34 | *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.* 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ### It's more difficult to find help with Vue.js 41 | 42 | *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.* 43 | 44 | 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. 45 | 46 | Stack overflow also helps but the quality of the answers there is not always great. 47 | 48 | ### There's not enough success stories of big companies using Vue.js 49 | 50 | *Argument lies on the small amount of large or popular companies that use Vue in their applications* 51 | 52 | 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. 53 | 54 | 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. 55 | 56 | ### There's no clear set of best practices and guidelines of how to use Vue.js on enterprise level 57 | 58 | *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.* 59 | 60 | 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. 61 | 62 | You can a look at our [Boilerplates](../ecosystem/boilerplates.md) page, where we dive deeper into the official Vue boilerplates. 63 | 64 | 65 | 66 | 67 | * [Vue.js Application Structure and CSS Architecture](https://markus.oberlehner.net/blog/vue-application-structure-and-css-architecture/) 68 | * [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) 69 | * [How to Structure a Vue.js Project](https://itnext.io/how-to-structure-a-vue-js-project-29e4ddc1aeeb) 70 | 71 | 72 | 73 | 74 | ### There's no native mobile solution as good as React Native 75 | 76 | *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* 77 | 78 | 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. 79 | 80 | 81 | 82 | 83 | [Mobile Apps Page](../ecosystem/mobile-apps.md) 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /docs/guide/learning/courses.md: -------------------------------------------------------------------------------- 1 | # Video courses 2 | Showcase individual Vue related video courses. Platforms go into the [learning platforms](./learning-platforms.md) page. 3 | 4 | ## Advanced Vue Component Design 5 | **Author:** Adam Wathan 6 | 7 | Created by Adam Wathan, popular Laravel figure and author of Tailwind CSS, this course is aimed towards developers with previous Vue.js experience, wanting to go one step further. 8 | 9 | As an advanced course, it covers topics like building custom controlled components, implementing external libraries, modals, component composition, render functions, renderless components, data providers and more. It uses ES6+ features, Single File Components, slots and others, so be prepared as users are expected to know how to work with them. 10 | 11 | 12 | 13 | 14 | [adamwathan.me](https://adamwathan.me/advanced-vue-component-design/) 15 | 16 | 17 | 18 | 19 | ## Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) 20 | **Author:** Maximilian Schwarzmüller 21 | 22 | The course covers all the important topics, from the Vue basics, binding props, form handling, Vuex and Vue Router. Material is being updated, as new features are added to the framework and its ecosystem, like Vue CLI 3 for example. 23 | 24 | Maximilian does a great job at explaining things in a simple and easy to follow manner, plus extra free videos are available on YouTube. 25 | 26 | 27 | 28 | 29 | [Udemy](https://www.udemy.com/vuejs-2-the-complete-guide/) 30 | 31 | 32 | 33 | 34 | 35 | ## Enterprise Vue Presale 36 | **Author:** Anthony Gore 37 | 38 | The course will teach you how to build a full-stack Vue.js CRUD application with an authenticated Node.js API, along with unit testing, modern JavaScript and best practices. 39 | 40 | Throughout the course you will use Vue CLI 3, Vuetify framework, MongoDB, Jest, Vue-test-utils, Nightwatch, deployment to Heroku and more. 41 | 42 | 43 | 44 | 45 | [Vuejsdevelopers.com](https://vuejsdevelopers.com/courses/enterprise-vue/) 46 | 47 | 48 | 49 | 50 | ## Vue.js Essentials - 3 Course Bundle 51 | **Author:** Anthony Gore 52 | 53 | Vuejsdevelopers.com hosts not only Vue articles, but also a few beginner video courses. The "Vue.js essentials" is sold as a 3 course bundle or separate. 54 | 55 | It goes through basics of building a Vue app, multi page websites using Vue Router and finally how to implement Vuex and Server-Side rendering for a high performance, SEO optimised website. 56 | 57 | 58 | 59 | 60 | [Vuejsdevelopers.com](https://courses.vuejsdevelopers.com/p/vue-js-essentials) 61 | 62 | 63 | 64 | 65 | ## Scrimba - Learn Vue for free 66 | **Author:** Zaydek 67 | 68 | 69 | 70 | 71 | [Scrimba.com](https://scrimba.com/g/glearnvue) 72 | 73 | 74 | 75 | 76 | ## Learn Vue 2 in 65 Minutes 77 | **Author:** Gary Simon 78 | 79 | The course is for absolute beginners who want to get up and running quickly, without being bogged down by excessive powerpoint slides and theory. 80 | 81 | In this free course you will go from Installing Vue (Three different methods), creating Vue Components, styling approaches, handling forms , animations and multi page routing. 82 | 83 | 84 | 85 | 86 | [YouTube](https://www.youtube.com/watch?v=78tNYZUS-ps) 87 | 88 | 89 | 90 | 91 | ## Nuxt.js - Vue.js on Steroids 92 | **Author:** Maximilian Schwarzmüller 93 | 94 | This course, will teach you how to create Nuxt/ Vue apps from scratch! Users will build an entire course project and dive into the core features Nuxt.js offers. 95 | 96 | It goes through what Nuxt.js is exactly and how it connects to Vue, how to configure files and folders when using the framework, the different build targets, how to build a fully working app with authentication and more. 97 | 98 | By the end of the course, users would have made a complete Vue app, built with Nuxt.js, which can be rendered on the server (or as a static website!) and which is highly optimized. 99 | 100 | 101 | 102 | 103 | [Udemy](https://www.udemy.com/nuxtjs-vuejs-on-steroids/) 104 | 105 | 106 | 107 | 108 | ## Heartbeat - NW.js + Vue[tify].js Desktop App 109 | **Author:** Axel Uriel Martínez Castillo 110 | 111 | This is a step by step Youtube video series with short videos that aim to touch one subject at a time. It also features the use of Vuetify.js and some very handy npm packages during the journey. 112 | 113 | The video series starts by building the Vue app from scratch and then moving it into the Desktop environment. 114 | 115 | 116 | 117 | 118 | [YouTube](https://www.youtube.com/playlist?list=PLmJs3lfUmCdT9MyG60Oo6HM7xAn79vwZ0) 119 | 120 | 121 | 122 | 123 | ## Vue Js 2 Tutorial 124 | **Author:** The Net Ninja 125 | 126 | Simple and beginner friendly tutorial for getting started with Vuejs 127 | 128 | This youtube series covers the entire basics of Vuejs and important topics such as the Vue Instance, Event Listeners, Data binding, Life cycle Hooks and Setting up the vue-router plugin. 129 | 130 | 131 | 132 | 133 | [YouTube](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa) 134 | 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/desktop-apps.md: -------------------------------------------------------------------------------- 1 | # Desktop Apps 2 | 3 | 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: 4 | 5 | - **cross-platform**: all applications are developed with JavaScript, and can be packaged for Windows/MacOS/Linux; 6 | - **easy to build**: frameworks allow you to simply develop a web application and then 'convert' it to a desktop one using a packager; 7 | - **community**: if you maintain an open-source desktop project, you will more likely find contributors for it. 8 | 9 | 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. 10 | 11 | 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. 12 | 13 | ## Electron 14 | 15 | [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 16 | 17 | 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. 18 | 19 | ::: tip Pros 20 | 21 | - easy to start with 22 | - good development documentation 23 | - no need to change existing source code 24 | - has [Vue CLI plugin](https://github.com/nklayman/vue-cli-plugin-electron-builder) 25 | - mature developer community 26 | 27 | ::: 28 | 29 | ::: danger Cons 30 | 31 | - big package size 32 | - high memory usage 33 | - unprotected source code in package 34 | 35 | ::: 36 | 37 | 38 | 39 | 40 | - [Vue.js & Electron: The easy way](https://medium.com/@mikeal/vue-js-electron-the-easy-way-adc3ca09234a) 41 | - [Building a Desktop App with Vue: Electron](https://dev.to/vuevixens/building-a-desktop-app-with-vue-electron-3pl) 42 | 43 | 44 | 45 | 46 | ## NW.js 47 | 48 | [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. 49 | 50 | ::: tip Pros 51 | 52 | - easy to start with 53 | - no need to change an existing source code 54 | - compiling to protected binaries 55 | - has [Vue CLI plugin](https://github.com/NataliaTepluhina/vue-cli-plugin-nwjs) 56 | ::: 57 | 58 | ::: danger Cons 59 | 60 | - big package size 61 | - high memory usage 62 | - significantly less used than Electron 63 | ::: 64 | 65 | 66 | 67 | 68 | - [NW.js + Vue-CLI](https://github.com/nwutils/nw-vue-cli-example) 69 | 70 | 71 | 72 | 73 | - [Building a Desktop App with Vue: NW.js](https://dev.to/vuevixens/building-a-desktop-app-with-vue-nwjs-1f9e) 74 | - [Reducing app distribution size in NW.js](https://dev.to/thejaredwilcurt/reducing-app-distribution-size-in-nwjs-3d5f) 75 | 76 | 77 | 78 | 79 | ## Electron VS NW.js 80 | 81 | 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: 82 | 83 | - 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. 84 | - During the build process NW.js builds the whole Chromium; Electron uses [libchromiumcontent](https://github.com/electron/libchromiumcontent) to access Chromium's Content API 85 | - 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. 86 | 87 | ## Quasar Framework 88 | 89 | [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. 90 | 91 | 92 | 93 | 94 | * [Quasar repositories](https://github.com/quasarframework) 95 | * [Quasar documentation](https://quasar.dev) 96 | * [Quasar Electron documentation](https://quasar.dev/quasar-cli/developing-electron-apps/introduction) 97 | * [Quasar chat on Discord](https://chat.quasar.dev) 98 | * [Forum](https://forum.quasar.dev) 99 | 100 | 101 | 102 | 103 | ## Vuido 104 | 105 | [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. 106 | 107 | 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. 108 | 109 | 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. 110 | 111 | ::: tip Pros 112 | 113 | - easy to build 114 | - provides small package size compared to Electron or NW.js apps 115 | - well-documented 116 | ::: 117 | 118 | ::: danger Cons 119 | 120 | - appearance is limited to OS native GUI components 121 | - doesn't have a Vue CLI plugin, only Vue CLI 2 boilerplate 122 | 123 | ::: 124 | 125 | 126 | 127 | 128 | - [Vue CLI 2 Vuido boilerplate](https://github.com/mimecorg/vuido-webpack-template) 129 | - [Native desktop applications using Vue.js](https://codeburst.io/native-desktop-applications-using-vue-js-964e841e3c1d) 130 | - [Building a Desktop App with Vue: Vuido](https://dev.to/vuevixens/building-a-desktop-app-with-vue-vuido-490n) 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /docs/guide/learning/learning-platforms.md: -------------------------------------------------------------------------------- 1 | # Learning platforms 2 | 3 | ## Vue Specific 4 | A Vue specific learning platform is one that is solely focused on getting you up and running with Vue.js and its surrounding ecosystem. 5 | 6 | These will focus on building Vue applications, best practices in the real world and usually go deeper into the framework. 7 | 8 | ### Vue Mastery 9 | [Vue Mastery](https://www.vuemastery.com/) is a specialized Vue learning platform, hosted by Gregg Pollack and Adam Jahr. Both of them are veterans, with years of experience at teaching. 10 | 11 | Courses range from absolute beginner to intermediate and advanced ones, some of which can be viewed for free. Each lesson includes both video and written article style format, with lots of visual examples. Video and related source code can be easily downloaded for offline use. 12 | 13 | They also host Vue.js conference videos and co-organize and record the weekly Vue newsletter podcast. 14 | 15 | ### Vue School 16 | [Vue School](https://vueschool.io/) is a platform that focuses a bit more on intermediate to advanced Vue users. Their courses cover a wide range of topics, like component testing, nuxt, vuex, form validation, with both free and paid version, where the paid account can unlock further content on some courses. 17 | 18 | Lessons are developed by core team members Alex Kyriakidis, Chris Fritz and experts like Rolf Haug, Roman Kuba, Chopin brothers (nuxt.js authors) and many more. 19 | 20 | ### Become a Ninja with Vue 3 21 | [Become a Ninja with Vue](https://vue-exercises.ninja-squad.com/) teaches you how to build a complete Vue 3 application, using the Vue CLI, TypeScript and the Composition API, step by step. 22 | Each exercise comes with instructions, unit tests and e2e tests to check the code you write. When you've completed the exercise, you can submit your result to the platform. The first exercises are available for free, and you can upgrade to access more content, and learn about the router, HTTP, forms, etc. 23 | 24 | ## General Development 25 | The platforms listed below cover wider range of topics, with some more specialized than others. 26 | 27 | All of them have Vue courses, among other things, that are definitely worth checking out. 28 | 29 | ### Laracast 30 | [Laracasts](https://laracasts.com/) is an online learning platform targeted mainly towards Laravel developers. Their Vue courses are nice, with extra smaller videos mixed into other lessons, like the "Let's Build A Forum with Laravel and TDD" one, which shows how they used Vue.js to build components for the Laracasts forum. 31 | 32 | The videos explain in detail real world examples, reusable patterns, no generic todo apps or shop pages. For Laravel developers who like to tinker with Vue, the platform is a really good investment, as it covers both. 33 | 34 | The instructor and author of the platform, Jeffrey Way, is a pro when it comes to teaching. He has years of experience behind his back, and the quality of the videos is very good. 35 | 36 | ### Scotch.io 37 | [Skotch.io](http://scotch.io/) is an online learning platform specifically for web development that covers both videos and writing format. 38 | 39 | They have both articles and two video courses for Vue that are more in depth. In the videos, you will learn how to [build an online shop](https://scotch.io/courses/build-an-online-shop-with-vue) and a [Twitter clone](https://scotch.io/courses/build-a-twitter-clone-with-adonis-and-vue) 40 | 41 | The instructors are knowledgeable and have years of experience behind them. 42 | 43 | ### Frontend Masters 44 | [Frontend Masters](https://frontendmasters.com/) is an online video learning platform for JavaScript and front-end development, covering topics such as React, Node.js, Vue, Functional JavaScript, CSS Grid, Flexbox and more! 45 | 46 | The videos have top notch quality and go in-depth for the specific topic. If you are just starting out, there is a great [Introduction to Vue.js](https://frontendmasters.com/courses/vue/) that will bring you up to speed in no time. 47 | 48 | Their instructors are industry leaders, with the creator of Vue himself, Evan You, leading an [Advanced Vue](https://frontendmasters.com/courses/advanced-vue/)course there. Definitely worth checking out! 49 | 50 | ### Egghead.io 51 | [Egghead.io](https://egghead.io/) offers high quality content by a group of working web development professionals and open source contributors. They provide concise and dense video courses on some of the best tools in the industry. 52 | 53 | Their videos are straight to the point and deliver knowledge that you can use today. If you don't have time for long hours of tutorials, Egghead offers a wealth of bite-sized courses that pack more information in a fraction of the time. 54 | 55 | Egghead instructors are industry veterans with years of practical, from-the-trenches experience building real software at all scales. Some of the tutorials include [Building Offline-First Progressive Web Apps (PWA) in Vue.js](https://egghead.io/courses/offline-first-progressive-web-apps-pwa-in-vue-js) as well as other tutorials featuring [Nuxt](https://egghead.io/search?query=nuxt) and [How to Use TypeScript to Develop Vue.js Web Applications](https://egghead.io/courses/use-typescript-to-develop-vue-js-web-applications) 56 | 57 | ### Codecourse 58 | [Codecourse](https://codecourse.com) is a learning platform whose mission is to help you to learn to code with relaxed, easy to follow tutorials. 59 | 60 | Their videos are great and focus on practical projects to get you ahead. Rather than just teach theory, they are focused on real code to inspire your next project. For Laravel Developers that want to learn Vue, this is a great place to start! 61 | 62 | Their [Vue learning path](https://codecourse.com/subjects/vue-js) showcases tutorials that will take you from a beginner to an advanced level. If you've learned Vue already, you might want to add [State management with Vuex](https://codecourse.com/paths/state-management-with-vuex) to your toolkit and manage complex state with ease. 63 | 64 | ### Tutsplus 65 | [Tutsplus](https://code.tutsplus.com/) platform is a Self-Directed Learning approach which offers tutorials both in video and written format. 66 | 67 | They have a [Getting Started With Vue](https://code.tutsplus.com/courses/get-started-with-vue) course if you are new as well as a collection of great articles if you are looking for something specific. 68 | 69 | The instructors are experienced and well-versed in the topics they teach. 70 | 71 | ### Pluralsight 72 | [Pluralsight](https://www.pluralsight.com/paths/vue) is a technology learning platform whose mission is to publish high quality, relevant, and timely online training courses for serious developers, IT and creative pros. 73 | 74 | The videos are top quality and are taught progressively from beginner to advanced level, so you don't have to bother if you are learning the wrong way. If you don't know what Vue is, don't worry, the [Vue.js: Big Picture](https://www.pluralsight.com/courses/vuejs-big-picture) course will tell you what you need to know to get started with Vue.js and you can start [Developing Faster with the Vue CLI](https://www.pluralsight.com/courses/vue-cli-developing-faster) so you feel like a pro! 75 | 76 | 77 | The instructors are leading experts that have years of experience behind them and work for some of the biggest tech companies. 78 | 79 | -------------------------------------------------------------------------------- /docs/guide/community/social-media.md: -------------------------------------------------------------------------------- 1 | # Media 2 | 3 | ## Official Chat 4 | 5 | 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. 6 | 7 | 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. 8 | 9 | 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. 10 | 11 | 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. 12 | 13 | 14 | 15 | 16 | * [Vue.js chat on Discord](https://chat.vuejs.org) 17 | * [Vue.js chat's website](https://vue-land.js.org) 18 | 19 | 20 | 21 | 22 | ## Official Forum 23 | 24 | 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. 25 | 26 | 27 | 28 | 29 | [Vue.js forum on Discourse](https://forum.vuejs.org) 30 | 31 | 32 | 33 | 34 | 35 | ## Stack Overflow 36 | 37 | Stackoverflow's Vue.js section is a common place for people to ask questions related to programming with Vue. 38 | 39 | 40 | 41 | 42 | [Vue.js Section](https://stackoverflow.com/tags/vue.js/info) 43 | 44 | 45 | 46 | 47 | ## Newsletters 48 | 49 | 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. 50 | 51 | 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. 52 | 53 | 54 | 55 | 56 | [Vue.js News](https://news.vuejs.org/) - Official Vue.js newsletter, curated by Damian Dulisz, and podcast by Gregg Pollack and Adam Jahr. 57 | 58 | 59 | 60 | 61 | 62 | - [Vue.js Feed](https://vuejsfeed.com/) - One of the earliest Vue newsletters, maintained by Kostas Maniatis, co-author of the book "Majesty of Vue". 63 | - [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. 64 | - [MadeWithVuejs](https://madewithvuejs.com/) - A more recent newsletter, showcasing plugins, packages and websites built with Vue. 65 | 66 | 67 | 68 | 69 | ## Vue People 70 | 71 | [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. 72 | 73 | ## Influential People on Twitter 74 | 75 | Twitter is the first place where developers share updates on their packages, discuss ideas, point out findings, do polls or just ask for advice. 76 | 77 | 78 | 79 | 80 | * [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) 81 | * [People to Watch If You’re a Vue.js Developer](https://www.monterail.com/blog/people-to-watch-if-youre-a-vue.js-developer) 82 | 83 | 84 | 85 | 86 | ## Other Platforms 87 | 88 | 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. 89 | 90 | 91 | 92 | 93 | - [Nuxt](https://discord.nuxtjs.org/) 94 | - [Vuetify](https://community.vuetifyjs.com/) 95 | - [Quasar](https://discord.gg/5TDhbDg) 96 | - [VueJobs](https://discordapp.com/invite/PJrSZqm) 97 | - [Vue Material](https://discord.gg/vuematerial) 98 | - [Gridsome](https://discordapp.com/invite/7znJUkH) 99 | - [Vuesax](https://discord.gg/9dsKtvB) 100 | - [Buefy](https://discordapp.com/invite/ZkdFJMr) 101 | - [Bootstrap Vue](https://discordapp.com/invite/j2Mtcny) 102 | - [EGOIST OSS](https://discord.gg/2t5mdCz) - dedicated to libraries written by Egoist, one of Vue.js community partners known for writing many useful plugins. 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | - [VueVixens](https://slackin-fxsumkvfno.now.sh/) 111 | - [NativeScript-Vue](https://developer.telerik.com/wp-login.php?action=slack-invitation) 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | - [WeexEn](https://gitter.im/weex-en/) 120 | - [Element-UI](https://gitter.im/element-en/) 121 | - [iView](https://gitter.im/iview/iview) 122 | - [Semantic-ui-vue](https://gitter.im/Semantic-UI-Vue/) 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | - [Vue.js Developers](https://www.facebook.com/groups/vuejsdevelopers/) 131 | - [Laravel + Vue.js Developers](https://www.facebook.com/groups/1796516540421476) 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | [r/vuejs](https://www.reddit.com/r/vuejs/) 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | [Vue.js](https://spectrum.chat/vue-js) 148 | 149 | 150 | 151 | 152 | ## Other Language Media 153 | 154 | 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. 155 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/client-server-communication.md: -------------------------------------------------------------------------------- 1 | # Client Server Communication 2 | 3 | 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. 4 | 5 | ## Ajax Requests 6 | 7 | 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. 8 | 9 | ## Summary (TLDR) 10 | 11 | 12 | 13 | 14 | [Axios](#axios) 15 | 16 | 17 | 18 | 19 | [Vue Apollo](#vue-apollo) 20 | 21 | 22 | 23 | 24 | [Pusher](#pusher) 25 | 26 | 27 | 28 | 29 | [Firebase](#firebase) 30 | 31 | 32 | 33 | 34 | ### Axios 35 | 36 | 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. 37 | 38 | You can directly import Axios from NPM and use it in your components, without the need to install a dedicated plugin. 39 | 40 | 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. 41 | 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). 42 | Furthermore, it decouples your components from the internals of HTTP operations and REST APIs. 43 | 44 | 45 | 46 | 47 | * [Vue.js REST API Consumption with Axios](https://alligator.io/vuejs/rest-api-axios/) 48 | * [Single Page Apps with Vue.js and Flask: AJAX Integration](https://stackabuse.com/single-page-apps-with-vue-js-and-flask-ajax-integration/) 49 | 50 | 51 | 52 | 53 | ### Fetch 54 | 55 | Fetch is a newer Promise based API that is integrated into [modern Browsers](https://caniuse.com/#search=fetch). 56 | 57 | > 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) 58 | 59 | You can also import a library like `isomorphic-fetch` for using fetch in Node.js environment, where it is not available. 60 | 61 | To use it with Vue, you don't need plugins, you can just import `fetch` and start working. 62 | 63 | 64 | 65 | 66 | * [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) 67 | * [Understanding the Fetch API](https://flaviocopes.com/fetch-api/) 68 | 69 | 70 | 71 | 72 | ## GraphQL 73 | 74 | ::: contribute 75 | ::: 76 | 77 | - What is GraphQL 78 | - When does it make sense to use it 79 | - Links to tutorials 80 | 81 | ### Vue Apollo 82 | 83 | ::: contribute 84 | ::: 85 | 86 | - What is Apollo 87 | - Common use cases 88 | - Why use with Vue 89 | - Links to tutorials 90 | - Vue packages 91 | 92 | ## WebSockets 93 | 94 | 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. 95 | 96 | 97 | 98 | 99 | 100 | * [What are WebSockets?](https://pusher.com/websockets) 101 | * [An Introduction to WebSockets](https://blog.teamtreehouse.com/an-introduction-to-websockets) 102 | 103 | 104 | 105 | 106 | ### Pusher 107 | 108 | 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. 109 | 110 | 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. 111 | 112 | 113 | 114 | 115 | 116 | * [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) 117 | * [Pusher + Vue + Laravel](https://medium.com/@danielalvidrez/laravel-pusher-lets-do-it-96bd23e76a7e) 118 | 119 | 120 | 121 | 122 | ### Firebase 123 | 124 | > 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 125 | 126 | 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. 127 | 128 | 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. 129 | 130 | 131 | 132 | 133 | 134 | * [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) 135 | * [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/) 136 | * [Full Stack Vue.js with Firestore](https://medium.com/vue-mastery/full-stack-vue-js-with-firestore-62e2fe2ec1f3) 137 | * [Vue.js Firebase Integration with VueFire](https://alligator.io/vuejs/vuefire-firebase/) 138 | 139 | 140 | 141 | 142 | ### Feathers 143 | 144 | ::: contribute 145 | ::: 146 | 147 | - What is Feathers 148 | - Common usages 149 | - Why use with Vue 150 | - Popular Vue Packages 151 | - Tutorials 152 | 153 | ### Meteor 154 | 155 | ::: contribute 156 | ::: 157 | 158 | - What is Meteor 159 | - Common usages 160 | - Why use with Vue 161 | - Popular Vue Packages 162 | - Tutorials 163 | 164 | ### SocketIO 165 | 166 | ::: contribute 167 | ::: 168 | 169 | - What is SocketIO 170 | - Common usages 171 | - Why use with Vue 172 | - Popular Vue Packages 173 | - Tutorials 174 | 175 | [Integrating Vue.js and Socket.io](https://alligator.io/vuejs/vue-socketio/) 176 | 177 | ## SSE - Server Sent Events 178 | 179 | ::: contribute 180 | ::: 181 | 182 | - What are SSE 183 | - Common usages 184 | - Why use with Vue 185 | - Popular Vue Packages 186 | - tutorials 187 | 188 | https://github.com/tserkov/vue-sse#readme 189 | 190 | ## MQTT 191 | 192 | ::: contribute 193 | ::: 194 | 195 | > 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 196 | 197 | 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. 198 | 199 | 200 | 201 | 202 | 203 | * [Vue-Mqtt](https://github.com/nik-zp/vue-mqtt) 204 | * [Vue-Mqtt-Example](https://github.com/nik-zp/Vue-Mqtt-Example) 205 | * [Connecting Nuxt.js to MQTT](https://imantabrizian.me/posts/2017/11/nuxt-mqtt) 206 | * [Real-time visualization of high-frequency streams](https://itnext.io/javascript-real-time-visualization-of-high-frequency-streams-d6533c774794) 207 | 208 | 209 | 210 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/boilerplates.md: -------------------------------------------------------------------------------- 1 | # Boilerplates 2 | 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. 3 | 4 | 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. 5 | 6 | ## Summary (TLDR) 7 | 8 | 9 | 10 | 11 | [Vue Enterprise Boilerplate](#vue-enterprise-boilerplate) - very popular, suitable for enterprise apps. 12 | 13 | 14 | 15 | 16 | - [NW.js + Vue-CLI](#nw-js-vue-cli) 17 | - [Electron-Vue](#electron-vue) 18 | 19 | 20 | 21 | 22 | [Vue-Express](#vue-express) 23 | 24 | 25 | 26 | 27 | ## Vue Enterprise Boilerplate 28 | 29 | 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. 30 | 31 | 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. 32 | 33 | 34 | 35 | 36 | [Vue Enterprise Boilerplate - Github](https://github.com/chrisvfritz/vue-enterprise-boilerplate) 37 | 38 | 39 | 40 | 41 | ## Vuesion 42 | Vuesion is an actively maintained boilerplate for enterprise level, production-ready PWAs. It focuses on performance, development speed, and best practices. 43 | 44 | The boilerplate is build on top of the idea of micro-services or a service-oriented-architecture. 45 | 46 | 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. 47 | 48 | 49 | 50 | 51 | [Vuesion - Github](https://github.com/vuesion/vuesion) 52 | 53 | 54 | 55 | 56 | ## NW.js + Vue-CLI 57 | 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`. 58 | 59 | 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. 60 | 61 | 62 | 63 | 64 | [NW.js + Vue-CLI - Github](https://github.com/nwutils/nw-vue-cli-example) 65 | 66 | 67 | 68 | 69 | ## Electron-Vue 70 | 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. 71 | 72 | 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. 73 | 74 | 75 | 76 | 77 | [Electron-Vue - Github](https://github.com/SimulatedGREG/electron-vue) 78 | 79 | 80 | 81 | 82 | ## Vue-Express 83 | 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. 84 | 85 | 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. 86 | 87 | 88 | 89 | 90 | [Vue-Express - Github](https://github.com/icebob/vue-express-mongo-boilerplate) 91 | 92 | 93 | 94 | 95 | ## Real World Vue.js Boilerplate 96 | Real world application boilerplate, showcasing best practices for organising and structuring larger projects. 97 | 98 | 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. 99 | 100 | 101 | 102 | 103 | [Beauty vuejs boilerplate - Github](https://github.com/zmts/beauty-vuejs-boilerplate) 104 | 105 | 106 | 107 | 108 | ## Vuexpresso 109 | Vuexpresso is a skeleton app that eases the setup process when building applications with Express, Vue, Vuex, GraphQL, Webpack, MongoDB, Apollo. 110 | 111 | 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. 112 | 113 | 114 | 115 | 116 | [Vuexpresso - Github](https://github.com/Ethaan/vuexpresso) 117 | 118 | 119 | 120 | 121 | ## Laravel Vue Boilerplate 122 | 123 | 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. 124 | 125 | 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. 126 | 127 | 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. 128 | 129 | 130 | 131 | 132 | [Laravel Vue Boilerplate - Github](https://github.com/alefesouza/laravel-vue-boilerplate) 133 | 134 | 135 | 136 | 137 | ## Laravel Bootstrap 4 Vue 138 | 139 | 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. 140 | 141 | It incorporates Social authentication, login throttling and recaptcha, image optimization on upload and more. 142 | 143 | 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. 144 | 145 | 146 | 147 | 148 | [Laravel Bootstrap 4 Vue - Github](https://github.com/adr1enbe4udou1n/laravel-boilerplate) 149 | 150 | 151 | 152 | 153 | ## Hare - Vue Koa Nuxt.js 154 | 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. 155 | 156 | 157 | 158 | 159 | [Hare - Github](https://github.com/clarkdo/hare) 160 | 161 | 162 | 163 | 164 | ## vue-hackernews-2.0 165 | 166 | > HackerNews clone built with Vue 2.0 + vue-router + vuex, with server-side rendering. 167 | 168 | 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. 169 | 170 | 171 | 172 | 173 | [vue-hackernews-2.0 - Github](https://github.com/vuejs/vue-hackernews-2.0) 174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/hosting.md: -------------------------------------------------------------------------------- 1 | # Hosting 2 | 3 | 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: 4 | 5 | ## Static File Websites 6 | 7 | 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: 8 | 9 | * 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. 10 | * 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. 11 | 12 | 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. 13 | 14 | ## Static File Hosting 15 | 16 | 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. 17 | 18 | 19 | 20 | 21 | [What is Static Content?](https://www.maxcdn.com/one/visual-glossary/static-content/) 22 | 23 | 24 | 25 | 26 | ### Netlify 27 | 28 | 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. 29 | 30 | They offer integration with GitHub, GitLab and Bitbucket. Netlify offers a free hosting tier, which should suit most people's needs. 31 | 32 | 33 | 34 | 35 | * [Netlify Documentation](https://netlify.com) 36 | 37 | 38 | 39 | 40 | * [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) 41 | * [Deploy Nuxt.js Static App to Netlify](https://vueschool.io/lessons/deploy-nuxtjs-app-to-netlify) 42 | * [CSS-Tricks article on Netlify](https://css-tricks.com/static-file-hosting-doesnt-have-to-be-so-static/) 43 | 44 | 45 | 46 | 47 | ### GitHub/GitLab/Bitbucket Pages 48 | 49 | 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. 50 | 51 | 52 | 53 | 54 | * [Deploy Vue to GitHub pages-the easy way!](https://medium.com/@codetheorist/vue-up-your-github-pages-the-right-way-955486220418) 55 | * [Deploy CLI 3 app to GitLab Pages](https://cli.vuejs.org/guide/deployment.html#gitlab-pages) 56 | * [Bitbucket Pages](https://pages.bitbucket.io/) 57 | 58 | 59 | 60 | 61 | ### Firebase Hosting 62 | 63 | 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. 64 | 65 | 66 | 67 | 68 | * [Firebase Hosting docs](https://firebase.google.com/docs/hosting/) 69 | 70 | 71 | 72 | 73 | * [How to Deploy Vue.js Applications with Firebase Hosting](https://medium.com/@rachidsakara/how-to-deploy-vue-js-applications-with-firebase-hosting-40cfa7f724e4) 74 | * [Deploy a Vue.js App with Firebase Hosting](https://medium.com/@ShayneOSullivan/deploy-a-vue-js-app-with-firebase-hosting-3fc420cf3998) 75 | 76 | 77 | 78 | 79 | ### CloudFront 80 | 81 | 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. 82 | 83 | 84 | 85 | 86 | * [CloudFront](https://aws.amazon.com/cloudfront/) 87 | 88 | 89 | 90 | 91 | * [Deploy Vue App to AWS S3](https://itnext.io/deploy-vue-app-to-aws-s3-1256ce03a7a2) 92 | 93 | 94 | 95 | 96 | ### Surge.sh 97 | 98 | 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. 99 | 100 | 101 | 102 | 103 | * [Deploying a Vue CLI app to Surge](https://cli.vuejs.org/guide/deployment.html#surge) 104 | * [Deploying a Nuxt app to Surge](https://nuxtjs.org/faq/surge-deployment/) 105 | * [Surge Documentation](https://surge.sh/) 106 | 107 | 108 | 109 | 110 | ### Now.sh 111 | 112 | 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. 113 | 114 | 115 | 116 | 117 | 118 | * [Now documentation](https://zeit.co/now) 119 | 120 | 121 | 122 | 123 | ## Server Rendered Websites 124 | 125 | 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. 126 | 127 | 128 | * 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. 129 | * 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. 130 | 131 | These websites can only be run on a more traditional server hosting, where a server script is always listening and handling incoming requests. 132 | 133 | ## Traditional Server Hosting 134 | 135 | If you are planning to build a Laravel or Nuxt.js powered website, then you will need a more traditional hosting solution. 136 | 137 | 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. 138 | 139 | One would use such a hosting service typically for hosting a PHP, Python or Node.js backed website. 140 | 141 | ### Heroku 142 | 143 | 144 | 145 | 146 | * [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) 147 | 148 | 149 | 150 | 151 | 152 | ### Digital Ocean 153 | 154 | ::: contribute 155 | ::: 156 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/static-site-generators.md: -------------------------------------------------------------------------------- 1 | # Static Site Generators 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | Pre-rendering is not a silver bullet and has some caveats: 8 | 9 | * 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. 10 | * Dynamic Content - Routes that display user specific content or other dynamically fetched data, should show placeholders until the content is loaded. 11 | 12 | ## Summary (TLDR) 13 | 14 | 15 | 16 | 17 | [Vuepress](#vuepress) - uses markdown and Vue components to build docs, blogs and more 18 | 19 | 20 | 21 | 22 | [Saber](#saber) - uses markdown, Vue components and JS files. Options for view layer. 23 | 24 | 25 | 26 | 27 | [Nuxt](#nuxt-static-generated-mode) - statically pre-render any SSR compliant SPA, very flexible 28 | 29 | 30 | 31 | 32 | [Gridsome](#gridsome) - static websites with flexible GraphQL data layer for any backend 33 | 34 | 35 | 36 | 37 | [Prerender SPA Plugin](#prerender-spa-plugin) - low level prerendering plugin 38 | 39 | 40 | 41 | 42 | [Poi + vue-static](#poi-+-vue-static) - leverage pre-rendering for each route at build time 43 | 44 | 45 | 46 | 47 | ## Existing Solutions 48 | 49 | 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. 50 | 51 | ## Vuepress 52 | 53 | 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. 54 | 55 | 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. 56 | 57 | 58 | 59 | 60 | * [Official Docs](https://vuepress.vuejs.org/guide/#how-it-works) 61 | * [Documentation Platforms](./documentation.md#vuepress) - Vuepress as a documentation platform. 62 | * [Vuepress.gallery](https://vuepress.gallery/) - A gallery of Vuepress themes. 63 | 64 | 65 | 66 | 67 | * [The VuePress Book](https://vuepressbook.com/) - examples and demo code 68 | * [Vue-Powered Docs & Blog](https://snipcart.com/blog/vuepress-tutorial-vuejs-documentation) 69 | * [Build A Documentation System with Vue and VuePress](https://scotch.io/tutorials/zero-to-deploy-build-a-documentation-system-with-vue-and-vuepress) 70 | 71 | 72 | 73 | 74 | ## Gridsome 75 | 76 | 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. 77 | 78 | To learn more, go check out the [Gridsome](./gridsome.md) page. 79 | 80 | 81 | 82 | 83 | * [Gridsome documentation](https://gridsome.org/) 84 | * [Gridsome repository](https://github.com/gridsome/gridsome) 85 | * [Gridsome chat on Discord](https://discord.gg/daeay6n) 86 | 87 | 88 | 89 | 90 | * [How does Gridsome compare to Nuxt?](https://github.com/gridsome/gridsome/issues/193) 91 | * [Getting Started with Gridsome](https://scotch.io/tutorials/getting-started-with-gridsome) 92 | * [Leveraging Vue.js & GraphQL with Gridsome](https://snipcart.com/blog/vuejs-graphql-airtable-example) 93 | * [Building a blog with Gridsome: Creating the Blog](https://alligator.io/vuejs/gridsome-blog/) 94 | 95 | 96 | 97 | 98 | ## Prerender SPA Plugin 99 | 100 | 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. 101 | 102 | 103 | 104 | 105 | * [GitHub](https://github.com/chrisvfritz/prerender-spa-plugin) 106 | * [Vue CLI Plugin](https://github.com/SolarLiner/vue-cli-plugin-prerender-spa) 107 | 108 | 109 | 110 | 111 | * [How to Pre-render Vue.js Powered Websites with Webpack](https://markus.oberlehner.net/blog/how-to-pre-render-vue-powered-websites-with-webpack/) 112 | 113 | 114 | 115 | 116 | ## Nuxt Static Generated mode 117 | 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. 118 | 119 | 120 | 121 | 122 | * [Static Sites Powered By Nuxt and AWS](https://dev.to/smitjel/static-sites-powered-by-nuxt-and-aws-2hp7) 123 | * [Nuxt docs](https://nuxtjs.org/guide#static-generated-pre-rendering-). 124 | 125 | 126 | 127 | 128 | ### NuxtPress 129 | 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. 130 | 131 | There currently exist 3 modes: `docs`, `blog` & `slides` (experimental) and so it is already quite versatile. 132 | 133 | 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. 134 | 135 | 136 | 137 | 138 | * [NuxtPress documentation](https://nuxt.press/en/guide/) 139 | * [NuxtPress repository](https://github.com/nuxt/press) 140 | 141 | 142 | 143 | 144 | 145 | * [The story of NuxtPress](https://hire.jonasgalvez.com.br/2019/aug/19/the-story-of-nuxtpress/) 146 | 147 | 148 | 149 | 150 | ## Poi + vue-static 151 | 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). 152 | 153 | This approach is useful for simpler applications, which when bundled with Poi, can get pre-rendering almost for free. 154 | 155 | 156 | 157 | 158 | [Poi Docs](https://poi.js.org/guide/plugin-vue-static.html#install) 159 | 160 | 161 | 162 | 163 | ## Saber 164 | 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. 165 | 166 | For now Saber only works with Vue.js, but React support is planned for the future. 167 | 168 | 169 | 170 | 171 | [Saber Docs](https://saber.land) 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/server-side-rendering.md: -------------------------------------------------------------------------------- 1 | # Server Side Rendering 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | 8 | 9 | 10 | * [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) Good read 11 | * [What’s Server Side Rendering and do I need it?](https://medium.com/@baphemot/whats-server-side-rendering-and-do-i-need-it-cb42dc059b38) 12 | * [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) 13 | * [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. 14 | 15 | 16 | 17 | 18 | ## Benefits of Server Side Rendering (SSR) 19 | 20 | Server side rendering solves a few of the most annoying problems of single-page applications: 21 | 22 | ### SEO friendly 23 | 24 | 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. 25 | 26 | **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. 27 | 28 | With SSR, pages are returned as fully rendered HTML by the server, allowing for crawlers to scan at will. 29 | 30 | ### Fast Load on Slower Devices 31 | 32 | 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. 33 | 34 | 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. 35 | 36 | ### Social Presence 37 | 38 | 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. 39 | 40 | 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. 41 | 42 | ### Time To First Paint (TTFP) 43 | 44 | 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. 45 | 46 | 47 | 48 | 49 | [Problems with SSR - Time to interaction](#time-to-interaction) - for more info. 50 | 51 | 52 | 53 | 54 | ## Problems with SSR 55 | 56 | SSR sounds awesome, there are however some things that need to be taken in consideration. 57 | 58 | ### Time to Interactive 59 | 60 | 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. 61 | 62 | ### Time to First Byte (TTFB) is Slower 63 | 64 | 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. 65 | 66 | ### Server Costs 67 | 68 | Because there is usually a live Node.js instance always on, waiting to render a request, server costs are higher than static file hosting. 69 | 70 | 71 | 72 | 73 | [Hosting page](./hosting.md#server-rendered-websites) - for more info. 74 | 75 | 76 | 77 | 78 | ### Server Load 79 | 80 | 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. 81 | 82 | ### Platform Specific APIs are not Available 83 | 84 | 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. 85 | 86 | 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. 87 | 88 | With sliders and carousels, you could delay their rendering to after the client receives the page, so it gets rendered on the browser. 89 | 90 | 91 | 92 | 93 | * [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) 94 | 95 | 96 | 97 | 98 | ### Complex to Transform Deployed SPA to SSR 99 | 100 | 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. 101 | 102 | This is an issue mostly related with library and plugin authors not providing SSR compliant versions of their software. 103 | 104 | 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. 105 | 106 | ## Available Options for Vue 107 | 108 | :::tip 109 | This part of the page is still in development and could use some help. 110 | ::: 111 | 112 | Thankfully, there are a few options already for Vue when it comes to server-side rendering. 113 | 114 | ## Nuxt 115 | 116 | [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. 117 | 118 | 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. 119 | 120 | Learn more about it on the dedicated [Nuxt](./nuxt.md) page. 121 | 122 | ### NuxtPress 123 | 124 | [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. 125 | 126 | Learn more about it on the dedicated [Nuxt](./nuxt.md) page. 127 | 128 | ## Quasar Framework 129 | 130 | [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. 131 | 132 | 133 | 134 | 135 | * [Quasar repositories](https://github.com/quasarframework) 136 | * [Quasar documentation](https://quasar.dev) 137 | + [Quasar SSR documentation](https://quasar.dev/quasar-cli/developing-ssr/introduction) 138 | * [Quasar chat on Discord](https://chat.quasar.dev) 139 | * [Forum](https://forum.quasar.dev) 140 | 141 | 142 | 143 | 144 | ## Servue 145 | [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 146 | 147 | ## Vapper 148 | 149 | [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. 150 | 151 | If you need more freedom to configure your application, with little to no interference from the SSR framework, Vapper may be your choice. 152 | 153 | ## Vue Server Renderer 154 | 155 | 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. 156 | 157 | 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. 158 | 159 | If you don't need some really custom solution, we would advise you to pick one of the pre-made tools mentioned above. 160 | 161 | 162 | 163 | 164 | * [SSR Docs](https://ssr.vuejs.org/) 165 | 166 | 167 | 168 | 169 | * [Basic Server Side Rendering with Vue.js and Express](https://alligator.io/vuejs/basic-ssr/) 170 | * [VueJs: Server Side Render with Vue-router](https://medium.com/frontend-fun/vuejs-server-side-render-with-vue-router-e73d51699873) 171 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/forms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Handling Forms 3 | --- 4 | 5 | # Forms 6 | 7 | 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. 8 | 9 | ## Summary (TLDR) 10 | 11 | Here are the top pics from each category 12 | 13 | 14 | 15 | 16 | [Vee-Validate](#vee-validate) - little boilerplate, very intuitive, vastly popular 17 | 18 | 19 | 20 | 21 | [Vuelidate](#vuelidate) - very customisable 22 | 23 | 24 | 25 | 26 | [Vue Form Generator](#vue-form-generator) - provides the most fields out of the box 27 | 28 | 29 | 30 | 31 | [Vue Formulate](#vue-formulate) - covers both form generator and state management use cases 32 | 33 | 34 | 35 | 36 | ## Form Validation 37 | 38 | 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. 39 | 40 | ### Vee-Validate 41 | 42 | [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. 43 | 44 | 45 | 46 | 47 | * [GitHub Repo](https://github.com/logaretm/vee-validate) 48 | * [Docs](https://logaretm.github.io/vee-validate) 49 | 50 | 51 | 52 | 53 | * [Template-Based Form Validation with Vue.js and vee-validate](https://alligator.io/vuejs/template-form-validation-vee-validate/) 54 | 55 | 56 | 57 | 58 | ### Vuelidate 59 | 60 | 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. 61 | 62 | 63 | 64 | 65 | * [GitHub Repo](https://github.com/vuelidate/vuelidate) 66 | * [Docs](https://vuelidate.js.org/) 67 | 68 | 69 | 70 | 71 | * [Simple Vue.js Form Validation with Vuelidate](https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/) 72 | 73 | 74 | 75 | 76 | ## Form Generators 77 | 78 | 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. 79 | 80 | ### Vue-Form-Generator 81 | 82 | [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. 83 | 84 | The library has good documentation, high test coverage, and was the first fully production ready project of its kind for Vue. 85 | 86 | 87 | 88 | 89 | * [GitHub Repo](https://github.com/icebob/vue-form-generator) 90 | * [Docs](https://icebob.gitbooks.io/vueformgenerator) 91 | 92 | 93 | 94 | 95 | ### Vue Formulate 96 | 97 | [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. 98 | 99 | The project is well maintained and offers extensive documentation, good internalization support, and built-in validators. 100 | 101 | 102 | 103 | 104 | * [GitHub Repo](https://github.com/wearebraid/vue-formulate) 105 | * [Docs](https://vueformulate.com) 106 | 107 | 108 | 109 | 110 | ### Vue-Formly 111 | 112 | [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. 113 | 114 | 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. 115 | 116 | 117 | 118 | 119 | * [GitHub Repo](https://github.com/formly-js/vue-formly) 120 | * [Docs](https://matt-sanders.gitbooks.io/vue-formly) 121 | 122 | 123 | 124 | 125 | ## Form State Management 126 | 127 | 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. 128 | 129 | ### Vue-Final-Form 130 | 131 | [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. 132 | 133 | 134 | 135 | 136 | * [GitHub Repo](https://github.com/egoist/vue-final-form) 137 | * [Docs](https://egoist.github.io/vue-final-form) 138 | 139 | 140 | 141 | 142 | 143 | ### Vue-SimpleForm 144 | 145 | [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. 146 | 147 | 148 | 149 | 150 | * [GitHub Repo](https://github.com/blocka/vue-simpleform) 151 | 152 | 153 | 154 | 155 | ## Other Libraries 156 | 157 | There are many kinds of form related libraries that serve different purposes. Let's mention the most popular among them. 158 | 159 | ### Vue-Form-Wizard 160 | 161 | [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. 162 | 163 | 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. 164 | 165 | 166 | 167 | 168 | 169 | * [GitHub Repo](https://github.com/cristijora/vue-form-wizard) 170 | * [Docs](https://cristijora.github.io/vue-form-wizard) 171 | 172 | 173 | 174 | 175 | 176 | ### Vue-Multiselect 177 | 178 | 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. 179 | 180 | 181 | 182 | 183 | * [GitHub Repo](https://github.com/shentao/vue-multiselect) 184 | * [Docs](https://vue-multiselect.js.org) 185 | 186 | 187 | 188 | 189 | * [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) 190 | 191 | 192 | 193 | 194 | 195 | ## Learning materials 196 | 197 | Here's a list of selected general materials on how to write forms in Vue.js that don't require using any specific library. 198 | 199 | 200 | 201 | 202 | * [An imperative guide to forms in Vue.js 2](https://logrocket.com/blog/an-imperative-guide-to-forms-in-vue-js-2/) 203 | 204 | 205 | 206 | 207 | * [Building Forms with Vue.js](https://vue-community.org/guide/learning/books.html#building-forms-with-vue-js) 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/build-tools.md: -------------------------------------------------------------------------------- 1 | # Build Tools 2 | 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. 3 | 4 | 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. 5 | 6 | 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. 7 | 8 | Below are some of the more popular ones, used by the Vue community to build both web applications and libraries. 9 | 10 | ## Vue CLI 11 | 12 | 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. 13 | 14 | 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. 15 | 16 | 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). 17 | 18 | ### Features 19 | 20 | * Interactive project scaffolding 21 | * Full Graphic User Interface for managing Vue projects 22 | * Support for Typescript, Sass, Less, Stylus preprocessing. 23 | * ESLint and Babel pre-configured 24 | * Unit and End-to-end testing out of the box 25 | * Rich api, offering great extendability 26 | * Rich collection of both official and third party plugins, integrating first class tools. 27 | 28 | 29 | 30 | 31 | * [Vue CLI Docs](https://cli.vuejs.org/) 32 | 33 | 34 | 35 | 36 | * [The Vue.js CLI: learn how to use it](https://flaviocopes.com/vue-cli/) 37 | * [Vue CLI 3 - Creating our Project - Vue Mastery](https://www.vuemastery.com/courses/real-world-vue-js/vue-cli/) 38 | * [Getting Started With Vue CLI 3](https://codingthesmartway.com/getting-started-with-vue-cli-3/) 39 | 40 | 41 | 42 | 43 | ## Poi 44 | 45 | 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. 46 | 47 | 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. 48 | 49 | As with Vue CLI, Poi leans more towards building applications than libraries. 50 | 51 | ### Features 52 | 53 | * Out of box support for JS, CSS, File assets and more. 54 | * Framework-agnostic, with support for JSX, Vue and more with no configs. 55 | * Great extensibility via configuration api. 56 | * Fits most web apps and npm libraries. 57 | * Great development experience. 58 | * Plugin support for maximum extendability. 59 | 60 | 61 | 62 | 63 | * [Poi Docs](https://poi.js.org/) 64 | 65 | 66 | 67 | 68 | * [Scaffold a Vue.js app with Poi](https://alligator.io/vuejs/vue-scaffold-poi/) 69 | * [Experience in using Poi.js and Bili from Egoist](https://medium.com/vuejs-id/experience-in-using-poi-js-and-bili-from-egoist-efd78aa8323a) 70 | * [Make Webpack Easy with Poi](https://egghead.io/courses/make-webpack-easy-with-poi) Paid 71 | 72 | 73 | 74 | 75 | 76 | ## Bili 77 | Bili is a build tool on top of Rollup, that is meant to make bundling JavaScript libraries easier, without getting in the way. 78 | 79 | 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. 80 | 81 | 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. 82 | 83 | ### Features 84 | 85 | * Fast, zero-config by default. 86 | * Using Rollup under the hood. 87 | * Automatically transforms JS files using Buble/Babel/TypeScript. 88 | * Built-in support for CSS Sass Stylus Less CSS modules. 89 | * Ridiculously easy to use Rollup plugins if you want. 90 | * Friendly error logging experience. 91 | * Written in TypeScript, automatically generated API docs. 92 | 93 | 94 | 95 | 96 | * [Bili Docs](https://bili.egoist.sh/) 97 | 98 | 99 | 100 | 101 | * [Bundle Vue library with Bili](https://medium.com/@sox/bundle-vue-library-with-bili-65de446365a8) 102 | * [Experience in using Poi.js and Bili from Egoist](https://medium.com/vuejs-id/experience-in-using-poi-js-and-bili-from-egoist-efd78aa8323a) 103 | 104 | 105 | 106 | 107 | # Bundlers 108 | 109 | 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. 110 | 111 | Depending on the intended use case, each bundler has its strengths and weaknesses, which we will outline in the list below. 112 | 113 | ## Webpack 114 | 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. 115 | 116 | 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. 117 | 118 | 119 | 120 | 121 | * [Official Webpack Docs](https://webpack.js.org/) 122 | * [Webpack Academy](https://webpack.academy/) Freemium 123 | 124 | 125 | 126 | 127 | * [Setting up Webpack manually for Vue](https://vue-loader.vuejs.org/guide/) 128 | * [Vue.js and Webpack 4 From Scratch, Part 1](https://itnext.io/vuejs-and-webpack-4-from-scratch-part-1-94c9c28a534a) 129 | * [Webpack for Everyone](https://laracasts.com/series/webpack-for-everyone) 130 | 131 | 132 | 133 | 134 | 135 | ## Rollup 136 | 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. 137 | 138 | The bundler is used to package some of the most popular JavaScript tools and frameworks, including Vue itself. 139 | 140 | 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. 141 | 142 | 143 | 144 | 145 | * [Rollup Docs](https://rollupjs.org/guide/en) 146 | 147 | 148 | 149 | 150 | * [How to write and build JS libraries in 2018](https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953) 151 | 152 | 153 | 154 | 155 | 156 | ## Parcel 157 | 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. 158 | 159 | 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. 160 | 161 | 162 | 163 | 164 | * [Parcel with Vue](https://parceljs.org/vue.html) 165 | 166 | 167 | 168 | 169 | * [Building Vue.js Apps with Parcel](https://alligator.io/vuejs/vue-parceljs/) 170 | * [Using Parcel In A Vue.js App](https://scotch.io/tutorials/using-parcel-in-a-vuejs-app) 171 | 172 | 173 | 174 | 175 | ## Brunch 176 | 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. 177 | 178 | Brunch was made to replace task runners like Gulp or Grunt, before Webpack and Rollup had gained so much traction. 179 | 180 | 181 | 182 | 183 | * [Vue.js + Brunch: The Webpack Alternative You've Been Hungry For](https://vuejsdevelopers.com/2017/08/20/vue-js-brunch/) 184 | * [Getting Started with Brunch](https://scotch.io/tutorials/getting-started-with-brunch-the-ultra-fast-simple-config-build-tool) 185 | * [What is Brunch](https://github.com/brunch/brunch-guide/blob/master/content/en/chapter01-whats-brunch.md) 186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /docs/guide/learning/books.md: -------------------------------------------------------------------------------- 1 | # Books 2 | This page lists popular books about Vue development that focus on a single topic, like testing or larger scope, like building a whole application. 3 | 4 | 5 | 6 | 7 | [Top 10 Vue JS Books You Should Read](https://dev.to/heshanfu/top-10-vue-js-books-you-should-read-240c) 8 | 9 | 10 | 11 | 12 | ## Testing 13 | 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. 14 | 15 | ### Testing Vue.js Applications 16 | 17 | **Author:** Edd Yerburgh 18 | 19 | > A comprehensive guide to Vue.js testing by the author of the official testing utility. 20 | 21 | Testing Vue.js Applications is a comprehensive guide to testing Vue components, events and more. 22 | 23 | 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. 24 | 25 | 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. 26 | 27 | 28 | 29 | 30 | [Testing Vue.js Applications](https://www.manning.com/books/testing-vue-js-applications) 31 | 32 | 33 | 34 | 35 | ### Testing Vue.js components with Jest 36 | **Author:** Alex Jover Morales 37 | 38 | > A concise and practical guide to unit test your Vue.js components using Jest, the fully featured JavaScript testing framework. 39 | 40 | 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. 41 | 42 | 43 | 44 | 45 | [Testing Vue.js components with Jest](https://leanpub.com/testingvuejscomponentswithjest) 46 | 47 | 48 | 49 | 50 | ## Building Applications 51 | These books are more focused on the app building aspect, thus go deeper into the topic with tips and more detailed examples. 52 | 53 | ### The Majesty of Vue.js 2 54 | **Authors:** Alex Kyriakidis, Kostas Maniatis 55 | 56 | > This book will guide you through the path of the rapidly spreading Javascript Framework Vue.js! 57 | 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. 58 | 59 | 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. 60 | 61 | 62 | 63 | 64 | [The Majesty of Vue.js 2](https://leanpub.com/vuejs2) 65 | 66 | 67 | 68 | 69 | ### Fullstack Vue 70 | **Authors:** Hassan Djirdeh, Nate Murray, Ari Lerner 71 | 72 | > Fullstack Vue is a tutorial-driven book that will have you writing Vue apps in no time. 73 | 74 | 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. 75 | 76 | Included with the book is a 2h Screencast on how to setup and deploy a Vue application. 77 | 78 | 79 | 80 | 81 | [Fullstack Vue](https://www.fullstack.io/vue/) 82 | 83 | 84 | 85 | 86 | ### Vue.js 2 Web Development Projects 87 | **Author:** Guillaume Chau 88 | 89 | > A project-based, practical guide to get hands-on into Vue.js 2.5 development by building beautiful, functional and performant web applications 90 | 91 | This book is written by Vue core team member Guillaume Chau - Akryum, maintainer of Vue-CLI, Vue-Devtools, Vue Apollo, among others. 92 | 93 | 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. 94 | 95 | 96 | 97 | 98 | [Vue.js 2 Web Development Projects](https://www.packtpub.com/web-development/vuejs-2-web-development-projects) 99 | 100 | 101 | 102 | 103 | ### Vue.js in Action 104 | **Authors:** Erik Hanchett, Benjamin Listwon 105 | 106 | > Carefully explains the foundational concepts for understanding what Vue is doing and why. 107 | 108 | 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. 109 | 110 | 111 | 112 | 113 | [Vue.js in Action](https://www.manning.com/books/vue-js-in-action) 114 | 115 | 116 | 117 | 118 | ### Vue.js: Up and Running 119 | **Author:** Callum Macrae 120 | 121 | > Brisk introduction to building fast, interactive single-page web applications with Vue.js. 122 | 123 | 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. 124 | 125 | 126 | 127 | 128 | [Vue.js: Up and Running](https://shop.oreilly.com/product/0636920103455) 129 | 130 | 131 | 132 | 133 | ### Vue.js 2 Book 134 | **Author:** Nathan Wu 135 | 136 | > Learn by building practical Vue.js applications 137 | 138 | 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. 139 | 140 | By the end of this book, you'll gain a solid understanding of Vue and how it interacts with a Laravel backend. 141 | 142 | 143 | 144 | 145 | [Vue.js 2 Book](https://vuejsbook.com/) 146 | 147 | 148 | 149 | 150 | ### Full-Stack Vue.js 2 and Laravel 5 151 | **Author:** Anthony Gore 152 | 153 | > Learn to build professional full-stack web apps with Vue.js and Laravel 154 | 155 | 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. 156 | 157 | 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. 158 | 159 | 160 | 161 | 162 | [Full-Stack Vue.js 2 and Laravel 5](https://www.packtpub.com/application-development/full-stack-vuejs-2-and-laravel-5) 163 | 164 | 165 | 166 | 167 | ### The Vue Handbook 168 | **Author:** Flavio Copes 169 | 170 | 171 | 172 | 173 | [The Vue Handbook](https://vuehandbook.com/) 174 | 175 | 176 | 177 | 178 | ### Building Forms with Vue.js 179 | **Author**: Marina Mosti 180 | 181 | > Learn how to build dynamic schema-driven forms with Vue from scratch 182 | 183 | 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. 184 | 185 | 186 | 187 | 188 | [Building Forms with Vue.js](https://www.amazon.com/Building-Forms-Vue-js-Patterns-building-ebook/dp/B07YY7MGDD) 189 | 190 | 191 | 192 | 193 | ### Become a Ninja with Vue 3 194 | **Author**: Cédric Exbrayat 195 | 196 | > Learn how to build complete applications with Vue.js 3 197 | 198 | 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.), 199 | 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. 200 | 201 | 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. 202 | 203 | 204 | 205 | 206 | [Become a Ninja with Vue 3](https://books.ninja-squad.com/vue) 207 | 208 | 209 | 210 | 211 | ### Vue - The Road To Enterprise 212 | **Author**: Thomas Findlay 213 | 214 | > 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. 215 | 216 | "Vue - The Road To Enteprise" is a book that revolves around best practices, advanced patterns and techniques for the development of Vue applications. It covers both Vue 2 and Vue 3 and is a one stop resource for many crucial concepts that should help you solve and avoid many pain-points when developing Vue applications. 217 | 218 | This book covers many advanced topics, such as scalable project architecture, cutting-edge techniques for handling async operations and API states, performance optimisation, state management patterns, and more. Each chapter in the book can be read independently, so you can immediately dive into the topic that interests you the most. 219 | 220 | Note that "Vue - The Road To Enterprise" is not a beginner's guide. The reader should have at least an intermediate knowledge of Vue.js and JavaScript. 221 | 222 | 223 | 224 | 225 | [Vue - The Road To Enterprise](https://bit.ly/3pbKqSb) 226 | 227 | 228 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/editors-and-tools.md: -------------------------------------------------------------------------------- 1 | # Editors and Tools 2 | 3 | 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. 4 | 5 | ## Editors 6 | 7 | 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. 8 | 9 | The list below shows the top most popular choices with more details later on why you would chose one over the other. 10 | 11 | ### Best Code Editors (TLDR) 12 | 13 | 14 | 15 | 16 | - [VSCode](#vscode) - fast, versatile, plugin rich, very popular, **free**. 17 | - [WebStorm](#webstorm-phpstorm-jetbrains-ides) - fully featured IDE, heavy, **premium**. 18 | - [CodeSandbox](#codesandbox) - in-browser, cloud based, **free**. 19 | 20 | 21 | 22 | 23 | ### VSCode 24 | 25 | 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**. 26 | 27 | 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. 28 | 29 | Vetur is being developed closely with VSCode and Vue core teams, to ensure maximum parity. 30 | 31 | 32 | 33 | 34 | - [Official Website](https://code.visualstudio.com/) 35 | - [Vetur Plugin](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - enable improved Vue support 36 | - [Vue VSCode Extension Pack](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack) - collection of useful plugins for Vue app development 37 | * [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. 38 | 39 | 40 | 41 | 42 | ### WebStorm/PhpStorm (JetBrains IDEs) 43 | 44 | 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. 45 | 46 | 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. 47 | 48 | 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. 49 | 50 | ### CodeSandbox 51 | 52 | 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. 53 | 54 | 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. 55 | 56 | CodeSandbox has a very generous freemium policy with 50 active sandboxes (projects) absolutely free. 57 | 58 | 59 | 60 | 61 | - [Official Website](https://codesandbox.io) 62 | 63 | 64 | 65 | 66 | ### Atom 67 | 68 | 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. 69 | 70 | 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! 71 | 72 | Some say, that it’s a bit slow, but that’s just a way of hinting that you should refactor your huge components. 73 | 74 | 75 | 76 | 77 | - [ternjs](https://github.com/tststs/atom-ternjs) 78 | - [language-vue](https://github.com/hedefalk/atom-vue) 79 | - [ide-vue](https://github.com/rwatts3/atom-ide-vue) 80 | - [vue-fmt](https://github.com/voodeng/vue-fmt) 81 | 82 | 83 | 84 | 85 | ### SublimeText 86 | 87 | 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. 88 | 89 | 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. 90 | 91 | If you have to choose a light editor for Vue, we recommend VSCode. 92 | 93 | 94 | 95 | 96 | - [Vue Syntax Highlight](https://github.com/vuejs/vue-syntax-highlight) 97 | - [Vue.js Snippets](https://packagecontrol.io/packages/Vuejs%20Snippets) 98 | 99 | 100 | 101 | 102 | ## Tools 103 | 104 | 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. 105 | 106 | ### ESLint 107 | 108 | 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. 109 | 110 | [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. 111 | 112 | #### How to install Vue ESLint plugin 113 | 114 | Installation is as easy as following a few steps. There are official guides that are kept upto date. 115 | 116 | 117 | 118 | 119 | * [Vue CLI ESLint plugin ](https://cli.vuejs.org/config/#eslint) - either on project setup or later 120 | * [Vue ESLint User Guide](https://eslint.vuejs.org/user-guide/) - manually by following the official guide 121 | 122 | 123 | 124 | 125 | #### How to enforce coding standards (Standard or Airbnb styles) 126 | 127 | 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. 128 | 129 | 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. 130 | 131 | **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. 132 | 133 | 134 | 135 | 136 | * [@vue/eslint-config-standard](https://github.com/vuejs/eslint-config-standard) 137 | * [@vue/eslint-config-airbnb](https://github.com/vuejs/eslint-config-airbnb) 138 | 139 | 140 | 141 | 142 | #### Usage with Code Editors 143 | 144 | 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. 145 | 146 | 147 | 148 | 149 | * [VSCode](https://eslint.vuejs.org/user-guide/#visual-studio-code) - Requires plugin install, easy to configure. 150 | * [Webstorm](https://eslint.vuejs.org/user-guide/#intellij-idea-jetbrains-webstorm) - Just enable from settings. 151 | * [Sublime Text](https://eslint.vuejs.org/user-guide/#sublime-text) - Requires two plugins and a bit more setup. 152 | * [Atom](https://eslint.vuejs.org/user-guide/#atom-editor) - Just small option change needed. 153 | 154 | 155 | 156 | 157 | ### Prettier 158 | 159 | 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. 160 | 161 | The lack of options are actually one of its strong points, enforcing sensible defaults across the board. 162 | 163 | #### How to use Prettier with Vue 164 | 165 | 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. 166 | 167 | #### Using Prettier with ESLint 168 | 169 | 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. 170 | 171 | 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. 172 | 173 | If you are using Vue CLI, this comes out of the box, so no need to worry what plugins to install. 174 | 175 | 176 | 177 | 178 | * [Official tutorial for Prettier and ESLint](https://prettier.io/docs/en/integrating-with-linters.html#eslint) 179 | * [Formatting Vue.js Code with ESLint & Prettier](https://alligator.io/vuejs/vue-eslint-prettier/) 180 | 181 | 182 | 183 | 184 | #### Integrating Prettier with Code Editors 185 | 186 | **VSCode note:** 187 | 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. 188 | 189 | 190 | 191 | 192 | * [Official Prettier editor integration tutorials](https://prettier.io/docs/en/editors.html) 193 | * [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. 194 | * [Veturpack](https://github.com/octref/veturpack) - Project configured to work with Vetur and Prettier for VSCode. 195 | 196 | 197 | 198 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/mobile-apps.md: -------------------------------------------------------------------------------- 1 | # Mobile Apps 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | 8 | 9 | 10 | * [Hybrid Apps vs. Native Apps: Which Should You Build?](https://themanifest.com/app-development/hybrid-apps-vs-native-apps-which-should-you-build) 11 | * [10 Best Vue.js based UI Frameworks for Building Mobile Apps](https://superdevresources.com/vuejs-mobile-frameworks/) 12 | 13 | 14 | 15 | 16 | ## Summary (TLDR) 17 | 18 | 19 | 20 | 21 | [NativeScript-Vue](#nativescript-vue-badge-textpopular) 22 | 23 | 24 | 25 | 26 | * [Quasar](#quasar) 27 | * [Ionic Vue](#ionic-vue) 28 | 29 | 30 | 31 | 32 | * [Nuxt PWA](https://pwa.nuxtjs.org/) 33 | * [Quasar](https://quasar-framework.org/guide/pwa-configuring-pwa.html) 34 | 35 | 36 | 37 | 38 | ## Compile to Native 39 | 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. 40 | 41 | 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. 42 | 43 | ::: tip Pros 44 | * Builds to Native platform code 45 | * Performant 46 | * Direct access to all native APIs 47 | * Allows usage of already existing platform UI components 48 | * Apps can look and feel truly native 49 | ::: 50 | 51 | ::: danger Cons 52 | * Cannot use HTML, only provided XML-like components by framework 53 | * Cannot use CSS to style components 54 | * Need to use different components for each platform 55 | ::: 56 | 57 | ### Weex 58 | [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. 59 | 60 | It has a CLI tool, official UI theme and a set of plugins. 61 | 62 | Weex has a deep integration with Vue, thus the support parity between the two is very good. 63 | 64 | :::warning Keep in mind 65 | * It is developed and used mostly in China, so it may be a con for someone. 66 | * Not enough learning material in English, besides official docs. 67 | ::: 68 | 69 | 70 | 71 | 72 | * [Native Mobile Apps with Weex and VueJS 2.0](https://hackernoon.com/how-to-create-a-weex-vue2-project-6b94981bee4e) 73 | * [Native Mobile Apps with Vue.js and Weex: Getting Started](https://alligator.io/vuejs/getting-started-vue-weex/) 74 | * [Native apps with Vue.js: Weex or NativeScript? — chapter I](https://hackernoon.com/native-apps-with-vue-js-weex-or-nativescript-8d8f0bac041d) 75 | * [Native apps with Vue.js: Weex or NativeScript? — chapter II](https://hackernoon.com/native-apps-with-vue-js-weex-or-nativescript-chapter-ii-6d1776da090d) 76 | 77 | 78 | 79 | 80 | ### NativeScript-Vue 81 | 82 | > NativeScript-Vue is a NativeScript plugin which allows you to use Vue.js to craft your mobile application. 83 | 84 | [NativeScript-Vue](https://www.nativescript.org) is one of the most popular solutions for native mobile apps with Vue. 85 | 86 | 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 87 | 88 | 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. 89 | 90 | ::: tip Pros 91 | * Active, growing English speaking community 92 | * First-class support by NativeScript 93 | * Very actively developed 94 | * Vue-Devtools support 95 | * Cross-platform without maintaining two code bases. 96 | ::: 97 | 98 | ::: warning Keep in mind 99 | * Routing is done manually, no Vue-Router support 100 | * Styling is done via a constrained set of CSS rules 101 | * Lots of examples for Angular, might need to adapt 102 | ::: 103 | 104 | 105 | 106 | 107 | * [Documentation](https://nativescript-vue.org/en/docs/introduction/) 108 | * [Playground Tutorial](https://nativescript-vue.org/en/docs/getting-started/playground-tutorial/) 109 | * [Learn NativeScript-Vue the Easy Way](https://www.nativescript.org/blog/learn-nativescript-vue-the-easy-way) 110 | 111 | 112 | 113 | 114 | * [Lessons Learned on Writing Apps with NativeScript VueJS](https://medium.com/learning-lab/lessons-learned-on-writing-apps-with-nativescript-vuejs-bd6a3066f0cb) 115 | * [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/) 116 | * [Getting Started with NativeScript-Vue 1.0](https://vuejsdevelopers.com/2018/03/05/getting-started-vue-nativescript/) 117 | * [Native Mobile Apps with Vue.js and NativeScript](https://alligator.io/vuejs/getting-started-vue-nativescript/) 118 | 119 | 120 | 121 | 122 | ### Vue-Native 123 | 124 | 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. 125 | 126 | Being younger than NativeScript-Vue, it has a smaller community and adoption, but is nonetheless growing as well. 127 | 128 | 129 | 130 | 131 | * [Vue-Native Documentation](https://vue-native.io/docs/) 132 | 133 | 134 | 135 | 136 | * [How to Setup, Build and Deploy Native Apps with Vue](https://scotch.io/tutorials/how-to-setup-build-and-deploy-native-apps-with-vue) 137 | * [Vue Native Basics](https://www.youtube.com/watch?v=8e0XHPylhj0) 138 | 139 | 140 | 141 | 142 | ## Progressive Web Applications 143 | 144 | 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. 145 | 146 | 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. 147 | 148 | Below is a list of popular tools to generate a PWA quickly: 149 | 150 | 151 | 152 | 153 | * [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) 154 | * [PWA vs Native App and How to Choose Between Them](https://blog.magestore.com/pwa-vs-native-app/) 155 | 156 | 157 | 158 | 159 | * [Vue CLI](https://naturaily.com/blog/pwa-vue-cli-3) - official CLI plugin to transform SPA's to PWA 160 | * [Nuxt PWA](https://pwa.nuxtjs.org/) - Nuxt module that adds PWA support to Nuxt apps 161 | * [Vuepress](https://v1.vuepress.vuejs.org/plugin/official/plugin-pwa.html) - Plugin to enable offline support 162 | * [Quasar](https://quasar-framework.org/guide/pwa-configuring-pwa.html) - Out of the box PWA generator via CLI 163 | * [Gridsome](https://gridsome.org/) - Generates out of the box PWA ready app 164 | 165 | 166 | 167 | 168 | ## Hybrid Apps 169 | 170 | 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. 171 | 172 | ::: tip Pros 173 | * Uses plain HTML, CSS and JavaScript 174 | * Build once, run everywhere 175 | * Can be fully custom styled with CSS 176 | * Wide range of Established UI libraries 177 | * Cheaper to create than Native 178 | ::: 179 | 180 | ::: danger Cons 181 | * Generally slower than Native apps 182 | * Access to lower level device APIs is dependent on wrapper (Cordova or Capacitor) 183 | * Platform inconsistencies 184 | ::: 185 | 186 | ## Mobile UI libraries 187 | 188 | 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. 189 | 190 | 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. 191 | 192 | Some frameworks focus more towards one platform, so careful consideration must be taken, if true native look is required for each platform. 193 | 194 | ### Quasar 195 | 196 | 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. 197 | 198 | 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. 199 | 200 | 201 | 202 | 203 | * [Documentation](https://quasar-framework.org/guide/) 204 | * [Discord Chart server](https://discordapp.com/invite/5TDhbDg) 205 | * [Forum](https://forum.quasar-framework.org/) 206 | 207 | 208 | 209 | 210 | * [Make your Vue.js project fast, cheap and good!](https://medium.com/quasar-framework/the-quasar-method-e19daf9abb5f) 211 | 212 | 213 | 214 | 215 | * [Create a Vue js app & deploy to web, mobile app & desktop app in 30 minutes!](https://www.youtube.com/watch?v=iml3hDVboHk) 216 | * [Quasar Framework for Vue.js](https://www.youtube.com/watch?v=Ud8jS3VlVHw) 217 | 218 | 219 | 220 | 221 | ### Ionic Vue 222 | 223 | 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/). 224 | 225 | 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. 226 | 227 | 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. 228 | 229 | ::: warning Keep in mind 230 | * Still young and small community 231 | ::: 232 | 233 | 234 | 235 | 236 | * [Documentation](https://ionicframework.com/docs/vue/overview) 237 | * [Components](https://ionicframework.com/docs/components) 238 | * [Announcing Ionic Vue](https://ionicframework.com/blog/announcing-ionic-vue) 239 | 240 | 241 | 242 | 243 | * [Your First Ionic Vue App](https://ionicframework.com/blog/new-tutorial-your-first-ionic-vue-app) 244 | 245 | 246 | 247 | 248 | * [Mobile apps with Vue and Ionic](https://www.youtube.com/watch?v=bJKwPsOqcqM) 249 | 250 | 251 | 252 | 253 | ### Framework 7 254 | 255 | 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. 256 | 257 | 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. 258 | 259 | 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. 260 | 261 | 262 | 263 | 264 | * [Documentation](https://framework7.io/vue/) 265 | * [Tutorials](https://framework7.io/tutorials/) 266 | 267 | 268 | 269 | 270 | * [Build a chat app using Framework7](https://pusher.com/tutorials/chat-app-framework7) 271 | 272 | 273 | 274 | 275 | * [Build an app with Framework7 1.x and VueJS tutorial](https://www.youtube.com/watch?v=mG12D07YXwk&t=7s) 276 | * [Building Mobile Apps with Vue and Framework7](https://www.youtube.com/watch?v=iq1lJdVzpik) 277 | 278 | 279 | 280 | 281 | ### Onsen UI 282 | 283 | ::: contribute 284 | ::: 285 | 286 | ### Mint UI 287 | 288 | ::: contribute 289 | ::: 290 | 291 | -------------------------------------------------------------------------------- /docs/guide/ecosystem/documentation.md: -------------------------------------------------------------------------------- 1 | # Documentation Platforms 2 | 3 | Documentation is a very important part of any software, especially if it is going to be used by more than one developer. 4 | 5 | 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. 6 | 7 | ## Documentation Websites 8 | 9 | When choosing a platform to write your docs on, think about your priorities and preferences. 10 | 11 | - Do you want to write in markdown files or do you prefer to write html webpages? 12 | - Do you want a custom designed website or a generic one will do just fine? 13 | - Is SEO important to you? 14 | - Do you mind a pre-build step or do you want everything to run as is? 15 | - Do you need custom features, specific for your documentation purposes? 16 | - Where do you plan to host your documentation? Can you use static site hosting or do you need a server? 17 | 18 | ## Summary (TLDR) 19 | 20 | 21 | 22 | * [Vuepress](#vuepress) 23 | 24 | 25 | 26 | 27 | * [Docute](#docute) 28 | 29 | 30 | 31 | 32 | * [Storybook](#storybook) 33 | 34 | 35 | 36 | 37 | * [Vue Styleguidist](#vue-styleguidist) 38 | 39 | 40 | 41 | 42 | ### Vuepress 43 | 44 | [Vuepress](http://vuepress.vuejs.org/) is a Vue-powered static site generator, that by default is optimized for technical documentation. 45 | 46 | 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. 47 | 48 | So to answer the questions above: 49 | 50 | - 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. 51 | - Vuepress comes with one documentation optimized theme by default, but allows providing custom ones. 52 | - Being Server Side Rendered, all pages are actually static html files, so search crawlers can scan them easily, plus pages load super fast. 53 | - 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. 54 | - As Vupress offers the full power of Vue.js, you can do pretty much any custom component you need. 55 | - 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. 56 | 57 | 58 | 59 | 60 | [Official Website](https://vuepress.vuejs.org/guide/#features) 61 | 62 | 63 | 64 | 65 | [Hosting](./hosting.md#static-hosting) 66 | 67 | 68 | 69 | 70 | ### Docute 71 | 72 | [Docute](https://docute.org/) is another Vue-powered Single Page Application. 73 | 74 | 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. 75 | 76 | 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. 77 | 78 | Here are the answers from the above questions: 79 | 80 | - Pages are written in `.md` files, along with the option of using Vue components inside them. 81 | - It comes with a predefined template, which allows some customisation, with currently no other themes available. 82 | - As a normal SPA, not an SSR website, SEO might not be as good in some cases. 83 | - There is no pre-build step. Markdown files are fetched and rendered in the browser. 84 | - It supports plugins as well as custom Vue Components, making customisation quite possible. 85 | - Docute websites can be hosted on static file hosting services, same as Vuepress. 86 | 87 | 88 | 89 | 90 | * [Official Website](https://docute.org/). 91 | 92 | 93 | 94 | 95 | ## Other Website Doc Platforms 96 | 97 | Below is a list of popular documentation generators, that are not connected to Vue. 98 | 99 | 100 | 101 | 102 | 103 | - [Docsify](https://docsify.js.org/#/) - native javascript alternative to Docute 104 | - [Jekyll](https://jekyllrb.com/) 105 | - [Hexo](https://hexo.io/) 106 | - [GitBook](https://www.gitbook.com/) 107 | - [Docusaurus](https://github.com/facebook/docusaurus) 108 | - [Docz](https://www.docz.site/) 109 | 110 | 111 | 112 | 113 | ## Component Workbenches 114 | 115 | 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 116 | 117 | 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. 118 | 119 | ### Storybook 120 | 121 | The most popular workbench is [storybook](https://storybook.js.org/docs/guides/guide-vue/). 122 | 123 | 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. 124 | 125 | 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. 126 | 127 | #### Documentation Style 128 | 129 | Storybook uses a separate JavaScript file to host documentation for a component. 130 | 131 | ```javascript 132 | // my-button.story.js 133 | import Vue from 'vue'; 134 | import { storiesOf } from '@storybook/vue'; 135 | import MyButton from './Button.vue'; 136 | 137 | storiesOf('Button', module) 138 | .add('with text', () => 'with text') 139 | .add('with emoji', () => '😀 😎 👍 💯') 140 | .add('as a component', () => ({ 141 | components: { MyButton }, 142 | template: 'rounded' 143 | })); 144 | ``` 145 | 146 | ::: tip Pros 147 | 148 | - The community is big and active 149 | - Lots of mature [plugins](#essential-plugins) 150 | - Visual testing 151 | - Sketch symbol exports 152 | - Accessibility checks 153 | - Easily adopted by front-end developers (Examples are written in JavaScript/TypeScript) 154 | ::: 155 | 156 | ::: danger Cons 157 | 158 | - Bare bones, without plugins out of the box (no prop detection, no code samples, no styling) 159 | - Input and output formats not practical for long descriptions 160 | - Stories are string litterals, so there is no syntax highlighting. 161 | - Only one "story" per page 162 | - Need to create a separate `webpack.config.js` file 163 | ::: 164 | 165 | 166 | 167 | 168 | - [@storybook/addon-a11y](https://github.com/storybooks/storybook/tree/next/addons/a11y) checks accessibility properties 169 | - [@storybook/addon-knobs](https://github.com/storybooks/storybook) add controls to change usage of your component 170 | - [@storybook/addon-storysource](https://github.com/storybooks/storybook) shows the source code of the template used for the story 171 | - [storybook-addon-vue-info](https://github.com/pocka/storybook-addon-vue-info) detects props info 172 | - [storybook-vue-router](https://github.com/gvaldambrini/storybook-router) add routes to your stories 173 | 174 | 175 | 176 | 177 | ### Vue Styleguidist 178 | 179 | [Vue-styleguidist](https://github.com/vue-styleguidist/vue-styleguidist) is a port of [react-styleguidist](https://github.com/styleguidist/react-styleguidist) for vue components. 180 | You are building a Design System. You want a site to showcase your components, this should be your first choice. 181 | 182 | #### Documentation Style 183 | 184 | Styleguidist uses standard JSDoc comments to extract useful meta data from components. 185 | 186 | ```html 187 | 194 | 195 | 226 | 227 | 228 | Here you can use markdown to show uses of the above component. 229 | 230 | ## The form component can be set with a nane 231 | 232 | Here give a reason for using the component. The code samples are going to be rendered automatically with the current comment. 233 | 234 | '''vue 235 | 236 | ''' 237 | 238 | ``` 239 | 240 | ::: tip Pros 241 | 242 | - Detects props, events, methods and slots automatically 243 | - Documentation is done inside the components using standard JSDoc 244 | - Markdown documentation can live inside custom `` block of a Single File Component 245 | - Displays a live editor to try components even on the static website 246 | - Meant for design system creation and showcase (powers vue-design-system) 247 | - Highly customizable HTML output template 248 | - Multiple component examples can be shown in the same markdown page 249 | - Components can be grouped by sections 250 | ::: 251 | 252 | ::: danger Cons 253 | 254 | - Generated output is currently limited to HTML 255 | - JSDoc can be verbose 256 | - The tool is built in React. To customize the template, you will need to use React. 257 | ::: 258 | 259 | 260 | 261 | 262 | - [Documentation](https://vue-styleguidist.github.io/) 263 | - [Github](https://github.com/vue-styleguidist/vue-styleguidist) 264 | - [Discord Channel](https://discordapp.com/channels/325477692906536972/538786416092512278) 265 | - [Live Example](http://rafaelescala.com/vue-styleguide/) 266 | 267 | 268 | 269 | 270 | 271 | ### Vuese 272 | 273 | [Vuese](https://github.com/vuese/vuese) is documentation oriented. It sacrifices interactivity to be more integrable. 274 | 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. 275 | 276 | #### Documentation Style 277 | 278 | Vuese uses its own documentation format, more compact than JSDoc. 279 | 280 | ```javascript 281 | // This is a description of the component 282 | export default { 283 | name: 'MyComponent', 284 | props: { 285 | // The name of the form, up to 8 characters 286 | name: { 287 | type: [String, Number], 288 | required: true, 289 | validator () {} 290 | } 291 | }, 292 | methods: { 293 | // @vuese 294 | // Used to manually clear the form 295 | clear () { 296 | // Fire when the form is cleared 297 | // @arg The argument is a boolean value representing xxx 298 | this.$emit('onclear', true) 299 | } 300 | } 301 | } 302 | ``` 303 | 304 | ::: tip Pros 305 | 306 | - Detects props, events, methods and slots automatically 307 | - Compact documentation in components 308 | - Vuepress default output 309 | - Configurable docute or markdown outputs 310 | - Entirely made with VueJs 311 | ::: 312 | 313 | ::: danger Cons 314 | 315 | - Static code samples 316 | - Not fully compliant with all Vue.js specs. Does not support (yet): 317 | - Functional component template props 318 | - Slots added to a render function 319 | - Decorator component names like `@Component({name:'MyComponent'})` 320 | 321 | ::: 322 | 323 | 324 | 325 | - [Github](https://github.com/vuese/vuese) 326 | 327 | 328 | 329 | 330 | - [Live Example](https://buptsteve.github.io/markdown-it-vuese/example/demo.html#props) 331 | 332 | 333 | 334 | 335 | 336 | ### Vue Design System 337 | 338 | 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. 339 | 340 | [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. 341 | 342 | 343 | 344 | 345 | - [Official website](https://vueds.com/) 346 | - [Github](https://github.com/viljamis/vue-design-system) 347 | - [Live Example](https://vueds.com/example/) 348 | 349 | 350 | 351 | 352 | ## Documentation Generators 353 | 354 | Automatic documentation generators scan your files and output a structured format. Some create markdown, some create html pages. 355 | 356 | ### Vuedoc 357 | 358 | Vuedoc is extracting JSDoc to write documentation in a markdown file. 359 | 360 | 361 | 362 | 363 | - [Gitlab](https://gitlab.com/vuedoc/md) 364 | - [JSDoc3 plugin](https://github.com/ccqgithub/jsdoc-vuedoc) Generate JSDoc3 powered documentations using vuedoc. 365 | 366 | 367 | 368 | 369 | 370 | ### JSDoc Vuejs 371 | 372 | This writes an html page by extracting the JSDoc from your component. Internally, it runs on JSDoc3. It supports 4 different output formats: 373 | 374 | 375 | 376 | 377 | - [Github](https://github.com/Kocal/jsdoc-vuejs) 378 | 379 | 380 | 381 | 382 | - Default: made by Kocal author of jsdoc-vuejs 383 | - [Docstrap](https://github.com/docstrap/docstrap) 384 | - [Minami](https://github.com/nijikokun/minami) 385 | - [Tui](https://nhnent.github.io/tui.jsdoc-template/latest/) 386 | 387 | 388 | 389 | --------------------------------------------------------------------------------