VueJS - Environment Setup

Vue 3 - Environment Setup

Setting up a development environment for Vue 3 can be done in several ways, ranging from a simple script include for quick prototypes to sophisticated build setups for large applications.

Using CDN / Standalone Script

The quickest way to start using Vue is by including it directly in an HTML file using a <script> tag. This is suitable for learning, prototyping, or integrating Vue into existing non-SPA projects.

<!DOCTYPE html>
<html>
<head>
    <title>Vue 3 CDN Example</title>
    <!-- Include Vue 3 from a CDN -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input v-model="message">
    </div>

    <script>
        const { createApp, ref } = Vue;

        createApp({
            setup() {
                const message = ref('Hello Vue 3!');
                return { message };
            }
        }).mount('#app');
    </script>
</body>
</html>

You can grab the latest Vue 3 script URL from CDNs like:

• unpkg: https://unpkg.com/vue@3 (always points to the latest v3)
• jsDelivr: https://cdn.jsdelivr.net/npm/vue@3

For production, it’s recommended to link to a specific version number (e.g., vue@3.2.47) to avoid unexpected breaks from newer releases. Use the .prod.js version for production builds (e.g., https://unpkg.com/vue@3/dist/vue.global.prod.js).

This method doesn’t require any build tools but lacks features like Single File Components (SFCs) and build optimizations.

Using Vite (Recommended Build Tool)

For modern Vue development, especially for SPAs, using a build tool is essential. Vite is the current officially recommended build tool for Vue 3. It offers extremely fast development server startup and Hot Module Replacement (HMR).

To create a new Vite-powered Vue project, you need Node.js (version 16+ recommended) installed. Then, run the following command in your terminal:

# npm
npm create vue@latest

# yarn
yarn create vue@latest

# pnpm
pnpm create vue@latest

This command will prompt you for project details, including:

• Project name
• Whether to add TypeScript support
• Whether to include JSX support
• Whether to add Vue Router for routing
• Whether to add Pinia for state management
• Whether to add Vitest for unit testing
• Whether to add Cypress or Playwright for E2E testing
• Whether to add ESLint for code linting
• Whether to add Prettier for code formatting

After the project is created:

# Navigate into your project directory
cd <your-project-name>

# Install dependencies
npm install
# or: yarn install or pnpm install

# Start the development server
npm run dev
# or: yarn dev or pnpm dev

Vite will start a development server, usually at http://localhost:5173. Open this URL in your browser to see your Vue application running. Changes you make to your .vue files (Single File Components) will be reflected instantly in the browser thanks to HMR.

To build your application for production:

npm run build
# or: yarn build or pnpm build

This will create an optimized bundle of your application in the dist directory, ready for deployment.

The project structure created by create-vue typically looks like this:

my-vue-app/
├── public/             # Static assets
├── src/
│   ├── assets/         # CSS, images, fonts
│   ├── components/     # Reusable Vue components
│   ├── router/         # Vue Router setup (if selected)
│   ├── stores/         # Pinia stores (if selected)
│   ├── views/          # Page-level components (often used with router)
│   ├── App.vue         # Root component
│   └── main.js         # App entry point (creates Vue app)
├── index.html          # Main HTML file (template)
├── package.json        # Project dependencies and scripts
├── vite.config.js      # Vite configuration
└── ...                 # Other config files (tsconfig, eslintrc etc.)

Using Vue CLI (Legacy Build Tool)

Vue CLI (@vue/cli) was the standard build tool for Vue 2 and is still maintained for Vue 3, but Vite is now recommended for new projects due to its speed advantages. If you need to work on an existing Vue CLI project or prefer its Webpack-based setup:

First, install Vue CLI globally (if you haven’t already):

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

Then, create a new project:

vue create my-vue-cli-app

You will be prompted to choose a preset (Vue 3 is the default for recent CLI versions) or manually select features similar to the create-vue prompts.

Navigate into the directory and run the development server:

cd my-vue-cli-app
npm run serve
# or
yarn serve

The development server typically starts at http://localhost:8080.

Choosing the Right Setup

• CDN/Standalone: Best for quick demos, learning, or adding small Vue functionalities to existing pages.
• Vite (npm create vue@latest): Recommended for all new SPA projects. Offers the best development experience.
• Vue CLI (vue create): Suitable for maintaining existing Vue CLI projects or if you specifically require a Webpack-based setup.