Training Example: Pinia – Review the Data, Give Your Score & Compare to the Real AI Evaluation

Are you an LLM? View /llms.txt for optimized Markdown documentation, or /llms-full.txt for full documentation bundle
[IMG: Vue.js Kawaii Logo by @icarusgkx]
[H1] The ProgressiveJavaScript Framework
An approachable, performant and versatile framework for building web user interfaces. Why Vue Get Started Install Get Security Updates for Vue 2 Special Sponsor slot is now vacant - Inquire now
[H2] Approachable
Builds on top of standard HTML, CSS and JavaScript with intuitive API and world-class documentation.
[H2] Performant
Truly reactive, compiler-optimized rendering system that rarely requires manual optimization.
[H2] Versatile
A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework.
[H2] Platinum Sponsors
Become a Sponsor
[H2] Gold Sponsors
Become a Sponsor
[H4] Docs
Quick StartGuideTutorialExamplesAPIGlossaryError ReferenceVue 2 DocsMigration from Vue 2
[H4] About
FAQTeamReleasesCommunity GuideCode of ConductPrivacy PolicyThe Documentary
[H4] Support
SponsorPartners
[H4] Resources
ThemesUI ComponentsPlugins CollectionCertificationJobsT-Shirt Shop
[H4] Official Libraries
Vue RouterPiniaTooling Guide
[H4] Video Courses
Vue MasteryVue School
[H4] Help
Discord ChatGitHub DiscussionsDEV Community
[H4] News
BlogTwitterEventsNewsletters

[H1] Become a Vue.js Sponsor ​
Vue.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain such a large ecosystem and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.
[H2] How to Sponsor ​
Sponsorships can be done via GitHub Sponsors or OpenCollective. Invoices can be obtained via GitHub's payment system. Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers.If you have questions regarding tiers, payment logistics, or sponsor exposure data, please reach out to sponsor@vuejs.org.
[H2] Sponsoring Vue as a Business ​
Sponsoring Vue gives you great exposure to over 2 million Vue developers around the world through our website and GitHub project READMEs. This not only directly generates leads, but also improves your brand recognition as a business that cares about Open Source. This is an intangible but extremely important asset for companies building products for developers, as it improves your conversion rate.If you are using Vue to build a revenue-generating product, it makes business sense to sponsor Vue's development: it ensures the project that your product relies on stays healthy and actively maintained. The exposure and positive brand image in the Vue community also makes it easier to attract and recruit Vue developers.If you are building a product where your target customers are developers, you will gain high quality traffic through the sponsorship exposure, since all our visitors are developers. The sponsorship also builds brand recognition and improves conversion.
[H2] Sponsoring Vue as an Individual ​
If you are an individual user and have enjoyed the productivity of using Vue, consider donating as a sign of appreciation - like buying us coffee once in a while. Many of our team members accept sponsorships and donations via GitHub Sponsors. Look for the "Sponsor" button on each team member's profile on our team page.You can also try to convince your employer to sponsor Vue as a business. This may not be easy, but business sponsorships typically make a much larger impact on the sustainability of OSS projects than individual donations, so you will help us much more if you succeed.
[H2] Tier Benefits ​
Global Special Sponsor: Limited to one sponsor globally. Currently vacant. Get in touch!(Exclusive) Above the fold logo placement on the front page of vuejs.org.(Exclusive) Special shoutout and regular retweets of major product launches via Vue's official X account (320k followers).Most prominent logo placement in all locations from tiers below.Platinum (USD$2,000/mo): Prominent logo placement on the front page of vuejs.org.Prominent logo placement in sidebar of all content pages.Prominent logo placement in the README of vuejs/core and vuejs/vue.Gold (USD$500/mo): Large logo placement on the front page of vuejs.org.Large logo placement in the README of vuejs/core and vuejs/vue.Silver (USD$250/mo): Medium logo placement in the BACKERS.md file of vuejs/core and vuejs/vue.Bronze (USD$100/mo): Small logo placement in the BACKERS.md file of vuejs/core and vuejs/vue.Generous Backer (USD$50/mo): Name listed in the BACKERS.md file of vuejs/core and vuejs/vue, above other individual backers.Individual Backer (USD$5/mo): Name listed in the BACKERS.md file of vuejs/core and vuejs/vue.
[H2] Current Sponsors ​
[H3] Special Global Sponsor ​
[H3] Platinum ​
[H3] Platinum (China) ​
[H3] Gold ​
[H3] Silver ​

Are you an LLM? You can read better optimized documentation at /guide/quick-start.md for this page in Markdown format
[H1] Quick Start ​
[H2] Try Vue Online ​
To quickly get a taste of Vue, you can try it directly in our Playground.If you prefer a plain HTML setup without any build steps, you can use this JSFiddle as your starting point.If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on StackBlitz.To get a walkthrough of the recommended setup, watch this interactive Scrimba tutorial that shows you how to run, edit, and deploy your first Vue app.
[H2] Creating a Vue Application ​
PrerequisitesFamiliarity with the command lineInstall Node.js version ^20.19.0 || >=22.12.0In this section we will introduce how to scaffold a Vue Single Page Application on your local machine. The created project will be using a build setup based on Vite and allow us to use Vue Single-File Components (SFCs).Make sure you have an up-to-date version of Node.js installed and your current working directory is the one where you intend to create a project. Run the following command in your command line (without the $ sign):npmpnpmyarnbunsh$ npm create vue@latestsh$ pnpm create vue@latestsh# For Yarn (v1+)
$ yarn create vue
# For Yarn Modern (v2+)
$ yarn create vue@latest
# For Yarn ^v4.11
$ yarn dlx create-vue@latestsh$ bun create vue@latestThis command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in ./<your-project-name>...
Done.If you are unsure about an option, simply choose No by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:npmpnpmyarnbunsh$ cd <your-project-name>
$ npm install
$ npm run devsh$ cd <your-project-name>
$ pnpm install
$ pnpm run devsh$ cd <your-project-name>
$ yarn
$ yarn devsh$ cd <your-project-name>
$ bun install
$ bun run devYou should now have your first Vue project running! Note that the example components in the generated project are written using the Composition API and <script setup>, rather than the Options API. Here are some additional tips:The recommended IDE setup is Visual Studio Code + Vue - Official extension. If you use other editors, check out the IDE support section.More tooling details, including integration with backend frameworks, are discussed in the Tooling Guide.To learn more about the underlying build tool Vite, check out the Vite docs.If you choose to use TypeScript, check out the TypeScript Usage Guide.When you are ready to ship your app to production, run the following:npmpnpmyarnbunsh$ npm run buildsh$ pnpm run buildsh$ yarn buildsh$ bun run buildThis will create a production-ready build of your app in the project's ./dist directory. Check out the Production Deployment Guide to learn more about shipping your app to production.Next Steps >
[H2] Using Vue from CDN ​
You can use Vue directly from a CDN via a script tag:html<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Here we are using unpkg, but you can also use any CDN that serves npm packages, for example jsdelivr or cdnjs. Of course, you can also download this file and serve it yourself.When using Vue from a CDN, there is no "build step" involved. This makes the setup a lot simpler, and is suitable for enhancing static HTML or integrating with a backend framework. However, you won't be able to use the Single-File Component (SFC) syntax.
[H3] Using the Global Build ​
The above link loads the global build of Vue, where all top-level APIs are exposed as properties on the global Vue object. Here is a full example using the global build:html<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>CodePen Demo >html<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>CodePen Demo >TIPMany of the examples for Composition API throughout the guide will be using the <script setup> syntax, which requires build tools. If you intend to use Composition API without a build step, consult the usage of the setup() option.
[H3] Using the ES Module Build ​
Throughout the rest of the documentation, we will be primarily using ES modules syntax. Most modern browsers now support ES modules natively, so we can use Vue from a CDN via native ES modules like this:html<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>html<div id="app">{{ message }}</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>Notice that we are using <script type="module">, and the imported CDN URL is pointing to the ES modules build of Vue instead.CodePen Demo >CodePen Demo >
[H3] Enabling Import maps ​
In the above example, we are importing from the full CDN URL, but in the rest of the documentation you will see code like this:jsimport { createApp } from 'vue'We can teach the browser where to locate the vue import by using Import Maps:html<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>CodePen Demo >html<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp, ref } from 'vue'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>CodePen Demo >You can also add entries for other dependencies to the import map - but make sure they point to the ES modules version of the library you intend to use.Import Maps Browser SupportImport Maps is a relatively new browser feature. Make sure to use a browser within its support range. In particular, it is only supported in Safari 16.4+.Notes on Production UseThe examples so far are using the development build of Vue - if you intend to use Vue from a CDN in production, make sure to check out the Production Deployment Guide.While it is possible to use Vue without a build system, an alternative approach to consider is using vuejs/petite-vue that could better suit the context where jquery/jquery (in the past) or alpinejs/alpine (in the present) might be used instead.
[H3] Splitting Up the Modules ​
As we dive deeper into the guide, we may need to split our code into separate JavaScript files so that they are easier to manage. For example:index.htmlhtml<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import MyComponent from './my-component.js'
createApp(MyComponent).mount('#app')
</script>my-component.jsjsexport default {
data() {
return { count: 0 }
},
template: `<div>Count is: {{ count }}</div>`
}my-component.jsjsimport { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
template: `<div>Count is: {{ count }}</div>`
}If you directly open the above index.html in your browser, you will find that it throws an error because ES modules cannot work over the file:// protocol, which is the protocol the browser uses when you open a local file.Due to security reasons, ES modules can only work over the http:// protocol, which is what the browsers use when opening pages on the web. In order for ES modules to work on our local machine, we need to serve the index.html over the http:// protocol, with a local HTTP server.To start a local HTTP server, first make sure you have Node.js installed, then run npx serve from the command line in the same directory where your HTML file is. You can also use any other HTTP server that can serve static files with the correct MIME types.You may have noticed that the imported component's template is inlined as a JavaScript string. If you are using VS Code, you can install the es6-string-html extension and prefix the strings with a /*html*/ comment to get syntax highlighting for them.
[H2] Next Steps ​
If you skipped the Introduction, we strongly recommend reading it before moving on to the rest of the documentation.Continue with the GuideThe guide walks you through every aspect of the framework in full detail.Try the TutorialFor those who prefer learning things hands-on.Check out the ExamplesExplore examples of core features and common UI tasks.Edit this page on GitHub

Are you an LLM? You can read better optimized documentation at /guide/introduction.md for this page in Markdown format
[H1] Introduction ​
You are reading the documentation for Vue 3!Vue 2 support has ended on Dec 31, 2023. Learn more about Vue 2 EOL.Upgrading from Vue 2? Check out the Migration Guide.
[IMG: Vue Mastery banner]
Learn Vue with video tutorials on VueMastery.com
[IMG: Vue Mastery Logo]
[H2] What is Vue? ​
Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.Here is a minimal example:jsimport { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')jsimport { createApp, ref } from 'vue'
createApp({
setup() {
return {
count: ref(0)
}
}
}).mount('#app')template<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>Result Count is: 0The above example demonstrates the two core features of Vue:Declarative Rendering: Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.You may already have questions - don't worry. We will cover every little detail in the rest of the documentation. For now, please read along so you can have a high-level understanding of what Vue offers.PrerequisitesThe rest of the documentation assumes basic familiarity with 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 and then come back! You can check your knowledge level with these overviews for JavaScript, HTML and CSS if needed. Prior experience with other frameworks helps, but is not required.
[H2] The Progressive Framework ​
Vue is a framework and ecosystem that covers most of the common features needed in frontend development. But the web is extremely diverse - the things we build on the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways:Enhancing static HTML without a build stepEmbedding as Web Components on any pageSingle-Page Application (SPA)Fullstack / Server-Side Rendering (SSR)Jamstack / Static Site Generation (SSG)Targeting desktop, mobile, WebGL, and even the terminalIf you find these concepts intimidating, don't worry! The tutorial and guide only require basic HTML and JavaScript knowledge, and you should be able to follow along without being an expert in any of these.If you are an experienced developer interested in how to best integrate Vue into your stack, or you are curious about what these terms mean, we discuss them in more detail in Ways of Using Vue.Despite the flexibility, the core knowledge about how Vue works is shared across all these use cases. Even if you are just a beginner now, the knowledge gained along the way will stay useful as you grow to tackle more ambitious goals in the future. If you are a veteran, you can pick the optimal way to leverage Vue based on the problems you are trying to solve, while retaining the same productivity. This is why we call Vue "The Progressive Framework": it's a framework that can grow with you and adapt to your needs.
[H2] Single-File Components ​
In most build-tool-enabled Vue projects, we author Vue components using an HTML-like file format called Single-File Component (also known as *.vue files, abbreviated as SFC). A Vue SFC, as the name suggests, encapsulates the component's logic (JavaScript), template (HTML), and styles (CSS) in a single file. Here's the previous example, written in SFC format:vue<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>vue<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>SFC is a defining feature of Vue and is the recommended way to author Vue components if your use case warrants a build setup. You can learn more about the how and why of SFC in its dedicated section - but for now, just know that Vue will handle all the build tools setup for you.
[H2] API Styles ​
Vue components can be authored in two different API styles: Options API and Composition API.
[H3] Options API ​
With Options API, we define a component's logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside functions, which points to the component instance:vue<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event handlers in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {