Vue3 Fundamental Concepts
Introduction to Vue 3
Vue.js is a progressive JavaScript framework for building user interfaces. Its core library focuses solely on the view layer, making it easy to learn and integrate with third-party libraries or existing projects. Vue’s design goal is to achieve reactive data binding and composable view components through the simplest possible API.
History and Evolution of Vue.js
Vue.js was created by Evan You in late 2013 and first released in February 2014. Initially inspired by AngularJS, Vue evolved over time to develop its unique features, including a cleaner template syntax, a more efficient virtual DOM update mechanism, and a robust component system.
Vue 2.0, released in 2016, introduced numerous improvements, such as ES6 support, a refined component system, and enhanced support for server-side rendering (SSR) and native applications. Vue 2.0 also adopted the virtual DOM concept, improving performance and maintainability.
Vue 3, officially released in 2020, introduced the following new features and improvements:
- New Reactive System: Vue 3 uses a Proxy-based reactive system instead of
Object.defineProperty, making reactive operations more intuitive and performant. - Composition API: Vue 3 introduces the Composition API, a new programming paradigm that allows developers to organize logic in a function-based manner, improving code readability and reusability.
- Tree-shaking: Vue 3 leverages tree-shaking to reduce the final bundle size, ensuring unused code is excluded from the build.
- Improved Type Support: Vue 3 offers better TypeScript integration, enabling developers to write type-safe components and applications.
- Performance Optimizations: Vue 3 achieves better performance and lower memory usage through a refactored rendering engine.
Differences Between Vue 3 and Vue 2
Vue 3 introduces several key differences compared to Vue 2:
- Reactive System: Vue 3 uses a Proxy-based reactive system, making data observation more efficient and intuitive.
- Composition API: Vue 3’s Composition API changes how components are written, simplifying logic reuse.
- Optimized Renderer: Vue 3’s renderer is refactored for improved performance and reduced memory consumption.
- Smaller Bundle Size: Tree-shaking and modular design significantly reduce Vue 3’s bundle size.
- Enhanced Type System: Vue 3 provides better TypeScript support for stricter and more comprehensive type checking.
- Lifecycle Hook Changes: Vue 3 adjusts lifecycle hooks, introducing the
setup()phase and deprecating hooks likebeforeCreateandcreatedin the Composition API.
Vue3 Installation and Usage
Installing Node.js and npm
Before using Vue 3, ensure Node.js and npm (Node Package Manager) are installed on your computer.
node -v
npm -v
These commands should return the version numbers of Node.js and npm, respectively.
Creating a Vue 3 Project
Ensure you have the latest version of Node.js installed and are in the directory where you want to create your project. Run the following command:
npm create vue@latest
# or
yarn create vue@latest
#\ or
pnpm create vue@latest
This command installs and executes create-vue, Vue’s official project scaffolding tool. You’ll be prompted with optional features like 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 unsure about enabling a feature, press Enter to select “No.” After the project is created, install dependencies and start the development server with:
cd <my-project>
npm install
npm run dev
# or
cd <my-project>
yarn
yarn dev
Writing Your First Component
Let’s create a simple component. In the src/components directory, create a file named HelloWorld.vue with the following code:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
message: 'Hello Vue 3!'
}
},
}
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Then, import and use this component in src/App.vue:
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld,
},
}
</script>
Using the Composition API
The Composition API offers a different approach to organizing component logic. Create a file named Counter.vue in the src/components directory with the following code:
<template>
<div>
<p>Count is: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
count.value++
}
return {
count,
increment,
}
},
}
</script>
Unit Testing
Vue CLI supports unit testing. You can add testing dependencies by running vue add @vue/test-utils. Then, create test files in the tests/unit directory and use @vue/test-utils to test your components.
Building for Production
When ready to deploy your application, build a production-ready version with:
npm run build
This generates an optimized set of static files in the dist directory, ready for deployment to any static file server.
Deploying the Application
Deployment depends on your chosen hosting service, such as GitHub Pages, Netlify, or Vercel. Each service has its specific deployment process, typically involving uploading the dist directory’s contents to the server.
Code Analysis
- Project Setup:
create-vuesimplifies scaffolding with optional features. - Component Development: Options API and Composition API provide flexibility in organizing logic.
- Production Build: Optimized builds ensure efficient deployment.
- Deployment: Cloud services streamline hosting and scaling.
