Already know Vue 2 and just want to learn about what's new in Vue 3? Check out the Migration Guide!
The official documentation for Vue.js is divided into several parts, spread across multiple websites covering different topics or core libraries such as Vuex, Vue-Router or SSR guides. All these pages have offline support and can be installed on a mobile phone. The 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.
The best way to learn from the guide is by following the Essentials section chapter by chapter. Then you can continue with Components In-Depth.
However if you want to use .vue files while learning, read the Single File Components chapter first and then start the guide from the beginning. To utilize SFC, you can create a CodeSandbox project online or scaffold a new project locally using Vue CLI, which comes with its separate documentation.
Vue.js 3 Installation | Documentation
Remember to read the Reactivity in Depth 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. The 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. 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.
It comes out of the box with most of Vue related scaffolding tools, including Vue CLI. While the role of the guide is to teach you how to use individual features of Vue API, the cookbook gathers curated recipes for common tasks and use cases. 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.
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.
It uses Vue-Router, Vuex, Server Side Rendering and API integration with Firebase. If that is not enough for you, there's also a semi-official 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. Other than the guides, there's also a repository with official roadmap, presenting the plans for the upcoming releases of core libraries.
# Style Guide
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.
This tutorial is for users who want to use our maps within a Vue.js component or those who want to dynamiclly update the map using Vue.js. Download DemoView Demo in Browser.
Choose the map you want to install:. Embed Vue.js and your map files into theof your webpage and disable auto loading:. Add the following HTML to your webpage:. This creates your Vue.js #components-demo container
We've also used the component's template to create a button that calls a method to turn the map red.
This demonstrates how you can dynamically update the map. You now have a map component that you can integrate into your Vue.js project.
If you still have any questions, contact us for help.
This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our
component with a more complex template and logic without affecting the parent app.
In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components later in the guide, but here's an (imaginary) example of what an app's template might look like with components:
You may have noticed that Vue components look similar to Custom Elements, which are part of the Web Components Spec(opens new window). Indeed, parts of Vue's component design (for example the slot API) were influenced by the spec before it was natively implemented in browsers.
The main difference is that Vue's component model is designed as a part of a coherent framework that provides many additional features necessary for building non-trivial applications, for example reactive templating and state management - both of which the spec does not cover.
Vue also provides great support for both consuming and creating custom elements. For more details, check out the Vue and Web Components section.
# Reactivity Caveats
We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!