Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 installation

Vue 3 can be added to your project in a number of ways. Here are three common methods to get started:

Using Vue CLI (Recommended for large scale projects)

The Vue CLI (Command Line Interface) is a powerful tool that provides a full system for rapid Vue.js development. It helps you bootstrap new projects and offers features like hot-reloading, linting, and build process out of the box.

Install Vue CLI globally on your machine:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Then, create a new Vue 3 project using Vue CLI:

vue create my-project

You'll be presented with a prompt to pick a preset. You can either choose the default preset which includes a basic Babel + ESLint setup, or manually select features for a more tailor-fit setup. If you want to use Vue 3, make sure to select Vue 3 when choosing a version.

After creating a project, navigate into your new project folder and start your local development server:

cd my-project
npm run serve

Using Vite (Recommended for small to mid-scale projects)

Vite is a new build tool created by Evan You (the creator of Vue.js) that offers a faster and leaner development experience for modern web projects. It provides a development server with hot module replacement (HMR) and a build command for production.

First, install create-vite to create a new project:

npm init vite@latest my-project -- --template vue
# OR
yarn create vite my-project --template vue

Navigate into your new project folder and install dependencies:

cd my-project
npm install
# OR
yarn

Finally, start your local development server:

npm run dev
# OR
yarn dev

Via CDN (Recommended for quick prototypes)

You can include Vue in your project directly using a script tag in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 App</title>
</head>
<body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://unpkg.com/vue@3"></script>
    <script>
        const App = {
            data() {
                return {
                    message: 'Hello, Vue 3!'
                }
            }
        }

        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

This will include the latest version of Vue 3 directly from a CDN and can be a quick way to start experimenting with Vue without having to set up a local development environment.

Remember that Vue CLI and Vite provide a much more optimized and streamlined development experience, and are the recommended methods for working on larger Vue projects. The CDN version is best suited for small scale projects or quick prototyping.