Vue 3 Documentation

Posted on  by admin
NOTE

Already know Vue 2 and just want to learn about what's new in Vue 3? Check out the Migration Guide!

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

Watch a free video course on Vue Mastery

# RFCs

TIP

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

If you need more details on specific features, use the robust search system or browse the API documentation. 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.

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.

The Style Guide is accompanied by an ESLint plugin 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. 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.

# Roadmap

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.

Other than small code examples from the official website, there is also an example Github repository with a Hackernews clone 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. 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.

Like all plans, it's bound to change sometimes, so don't treat it as obligatory.

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

These instructions are for Vue 3, we have different instructions for Vue 2. Vue.js is an amazing lightweight JavaScript framework that is easy to use with our maps. In fact, you can just use the typical installation process (either self-hosted or using our file hosting) as long as you embed: directly inside Vue.js's root app (#app by convention) or outside of Vue's scope altogether.

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.

To use the map in a Vue.js component, follow these steps:.

# Examples

Choose the map you want to install:. Embed Vue.js and your map files into the of your webpage and disable auto loading:. Add the following HTML to your webpage:. This creates your Vue.js #components-demo container

and creates a component called to hold your map.

Add the following JavaScript to initiate Vue.js and create your map component:. Our map will load when the component has been mounted. By default, Vue doesn't recognize global variables, so we assign window.simplemaps_usmap to the variable name simplemaps_usmap using computed.

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.

See the Pen Intro-Components-1 by Vue (@Vue) on CodePen.

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:

# Cookbook

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!