VueJS 3 tutorial for beginners: build a shop in 11 chapters

Vue.js is a progressive JavaScript framework: you can add it to an existing page with a single script tag, or build a complete application with a build tool. This tutorial takes the second route, the one the official documentation and almost every project today follow.

Over eleven chapters, you build a small shop: a product page with its colour variants, a basket, a review form and the animations that go with them. Each concept turns up when the application needs it, never before.

What you are going to build

A single application, extended chapter after chapter. By the end it displays a product and its image, reacts when you hover over the colours, disables the button when a variant is out of stock, fills a basket, accepts validated reviews and animates them as they appear.

The code is split into components from chapter 8 onwards, as in a real project.

The eleven-chapter path

1. Create a Vue application, the project, createApp, the first reactive value.
2. Attribute binding, display the product image with v-bind.
3. Conditional rendering, say whether the product is available, with v-if and v-show.
4. List rendering, the fabric composition and the variants, with v-for.
5. Event handling, the button that fills the basket.
6. Class and style binding, the colour swatches and the disabled button.
7. Computed properties, derive the image and the availability from the selected variant.
8. Components and props, split the application up and pass data down.
9. Event communication, send the click back up to the parent.
10. Forms and v-model, the review form and its validation.
11. Transitions, animate things appearing and disappearing.

The complete code is downloadable at the top of the page: a Vite project with one folder per chapter and the test suite that checks each of them.

Composition API: the style used in this tutorial

Vue offers two ways of writing a component. The Options API files the code under options: data, methods, computed. The Composition API writes it as plain variables and functions inside a <script setup> block.

This tutorial uses the Composition API, because it is the style the official documentation recommends for a new project, and the one you will meet in most of the code written since Vue 3. Both styles are still supported: the Options API is not deprecated, and you will keep running into it in existing projects for a long time.

Here is the mapping between the two, worth keeping to hand.

// Composition API, in <script setup>

data() { return { n: 0 } }         const n = ref(0)
computed: { double() { … } }       const double = computed(() => …)
methods: { faire() { … } }         function faire() { … }
props: { titre: String }           const props = defineProps({ titre: String })
emits: ['valider']                 const emit = defineEmits(['valider'])
mounted() { … }                    onMounted(() => { … })
watch: { n(v) { … } }              watch(n, (v) => { … })

this.n                             n.value   // in the script only,
                                             // never in the template

Every chapter concerned recalls the Options API equivalent of the concept it covers.

What you need

• The basics of HTML, CSS and JavaScript. If arrow functions and destructuring mean nothing to you, review them before starting.
• Node.js 22.18 or newer (or 24.12 and later). Check with node -v: the official project generator refuses earlier versions. Also update npm with npm install -g npm@latest: the npm 10 bundled with Node 22 fails on npm install of a fresh Vue project.
• A code editor. Visual Studio Code with the official “Vue – Official” extension gives autocompletion in .vue files. WebStorm and Zed are fine too.

No knowledge of Vue 2 is required. If you are coming from it, remember that Vue.use, Vue.mixin and Vue.prototype are gone: everything now goes through the application instance returned by createApp.

How to work through this tutorial

Type the code rather than copying it. After each chapter, break something on purpose and read the error message: it is the best way to learn how to decode them.

Each chapter ends with an exercise on the concept it covers, which you can solve with what you have just written.

After this tutorial

To wire the application to real data, see how to add Firebase to a Vue application.

Once the eleven chapters are done, the logical next step is sharing state between components with Pinia, then routing with Vue Router. On the architecture side, see how to write your own Vue plugins, and how to handle SEO for a Vue application.