Pirate Wiki

Toggle Theme

Installation ​

There are 2 ways to include Vue.js into your project:

  • Including it using a <script> tag (No build step)
  • Use Vue with Build Tools (Recommended)

Using <script> tag ​

This is the simplest way to get started with Vue.js. This approach is perfect for adding Vue to an existing project without any build tools or bundlers. Just add the following script tag to your HTML page:

html
<html>
    <head>
        ...
 
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </head>
    ...
</html>

NOTE

When using Vue from a CDN, there is no "build step" involved. However, you won't be able to use the Single-File Component (SFC) syntax.

Notice the vue@3 in the provided CDN link. This will pull the latest version of Vue version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link, example [email protected].

Also, keep in mind that vue.global.js is the development build. It includes helpful console warnings and integrates with Vue Devtools, making it ideal for debugging. However, for production environments, you should use the minified production build to reduce bundle size and disable warnings.

Here’s an example of a recommended script tag for production use:

html
<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

Find the latest version here

That's it! Vue is now available for your project.

Use Vue with Build Tools ​

This is the recommended approach for production apps using features like SFCs, routing, state management, and more. Run the following command to create a Vue project:

shell
npm create vue@latest
shell
## For Yarn (v1+)
yarn create vue
## For Yarn Modern (v2+)
yarn create vue@latest
## For Yarn ^v4.11
yarn dlx create-vue@latest

The command will present you with prompts for several optional features such as TypeScript and testing support:

text
✔ 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 at this step (you can add the dependencies later too). Once the project is created, follow the instructions to install dependencies and start the dev server:

shell
cd <your-project-name>
npm install
npm run dev
shell
cd <your-project-name>
yarn
yarn dev

You should now have your first Vue project running! Note that the example components in the generated project are written using the Composition API, rather than the Options API.