Vue Fundamentals
Vue is a JavaScript framework for building interactive web interfaces from reusable components. It connects application state to HTML so the displayed page updates when that state changes.
itWeb development | OpenSkills.info
Intro
Vue Fundamentals
Vue is a JavaScript framework for building user interfaces. It extends HTML with template syntax, organizes an interface into components, and tracks reactive state. When reactive state changes, Vue updates the affected parts of the Document Object Model, or DOM.
Vue can enhance a section of an existing page without a build step. It can also power a single-page application, server-rendered application, or statically generated site. The same component and reactivity concepts apply across those arrangements.
The component and rendering model
A Vue application starts with createApp and mounts to a DOM container. The root component becomes the top of a component tree. Each component can own state and markup, receive data from its parent, and report events upward.
Most tool-enabled projects store a component in a Single-File Component, or SFC, with a .vue extension. An SFC can contain a <script> block for logic, a <template> block for markup, and a <style> block for CSS. Vue compiles the template into a render function. That function produces a virtual DOM tree, which describes the interface that should exist.
Mounting follows a recurring path:
Continue the course
This section is part of the paid course.
See pricing to subscribe, or log in if you already have access.
Where this skill leads
Relevant careers
See how this topic contributes to broader role-level skill maps.
Sources
- https://vuejs.org/guide/introduction.html
Supports
- Vue's declarative component model, progressive adoption paths, SFC structure, and API styles
- https://vuejs.org/guide/essentials/template-syntax.html
Supports
- Interpolation, bindings, directives, template compilation, and the v-html security boundary
- https://vuejs.org/guide/essentials/reactivity-fundamentals.html
Supports
- Refs, reactive proxies, deep conversion, DOM update timing, and destructuring limitations
- https://vuejs.org/guide/essentials/computed.html
Supports
- Cached derived values and computed getter constraints
- https://vuejs.org/guide/essentials/watchers.html
Supports
- Watch sources, side effects, flush timing, and watcher cleanup
- https://vuejs.org/guide/essentials/list.html
Supports
- v-for rendering and stable key identity
- https://vuejs.org/guide/essentials/component-basics.html
Supports
- Component trees, registration, props, events, slots, and dynamic components
- https://vuejs.org/guide/components/props.html
Supports
- One-way prop flow, validation, and mutation boundaries
- https://vuejs.org/guide/components/events.html
Supports
- Child-to-parent custom events and event declaration
- https://vuejs.org/guide/essentials/lifecycle.html
Supports
- Component lifecycle stages and lifecycle hooks
- https://vuejs.org/guide/reusability/composables.html
Supports
- Reusable stateful Composition API logic and cleanup conventions
- https://vuejs.org/guide/scaling-up/sfc.html
Supports
- Single-File Component blocks, compilation, and scoped styles
- https://vuejs.org/guide/extras/rendering-mechanism.html
Supports
- Compile, mount, patch, virtual DOM, dependency tracking, and update behavior
- https://vuejs.org/guide/scaling-up/state-management.html
Supports
- Shared state ownership and Pinia recommendation
- https://vuejs.org/guide/scaling-up/tooling.html
Supports
- create-vue, Vite, IDE tooling, browser DevTools, testing, and linting
- https://vuejs.org/guide/scaling-up/ssr.html
Supports
- Server rendering, hydration, request isolation, and platform boundaries
- https://vuejs.org/guide/best-practices/production-deployment.html
Supports
- Production error tracking and production build behavior
- https://router.vuejs.org/introduction.html
Supports
- Routing features and study-path rationale
- https://pinia.vuejs.org/introduction.html
Supports
- Store model and role in shared Vue application state
- https://vuejs.org/guide/scaling-up/testing.html
Supports
- Unit, component, and end-to-end testing boundaries
- https://github.com/sindresorhus/awesome
Supports
- Discovery of the curated Awesome Vue list
- https://github.com/vuejs/awesome-vue
Supports
- Discovery of VueUse, eslint-plugin-vue, Storybook, Vue Test Utils, Vue I18n, and unplugin-icons
- https://vueuse.org/guide/
Supports
- Composition API utility categories and reusable browser integrations
- https://eslint.vuejs.org/
Supports
- Vue template and script linting, syntax, directives, and style rules
- https://storybook.js.org/docs/get-started/frameworks/vue3-vite
Supports
- Isolated Vue component development, testing, and documentation
- https://test-utils.vuejs.org/guide/
Supports
- Vue component mounting, wrapper interaction, and behavior assertions
- https://vue-i18n.intlify.dev/guide/
Supports
- Vue localization, messages, formatting, and Composition API integration
- https://unplugin-icons.github.io/unplugin-icons/
Supports
- On-demand icon imports as framework components
- https://nuxt.com/docs/getting-started/introduction
Supports
- Vue full-stack framework conventions, rendering modes, routing, data, and deployment
- https://quasar.dev/introduction-to-quasar/
Supports
- Vue component framework and multi-platform build modes
- https://vuetifyjs.com/en/introduction/why-vuetify/
Supports
- Material Design Vue component suite and support options
- https://primevue.org/
Supports
- Vue component suite, styled and unstyled modes, and commercial add-ons
- https://element-plus.org/en-US/guide/design.html
Supports
- Vue 3 component suite, design principles, theming, localization, and SSR documentation
- https://www.naiveui.com/
Supports
- TypeScript Vue component suite and theme configuration
- https://vite.dev/guide/
Supports
- Development server, plugin transformation, and production builds
- https://devtools.vuejs.org/guide/
Supports
- Inspection of Vue components, events, routes, and stores
- https://github.com/vuejs/vue/releases/tag/0.6.0
Supports
- Vue 0.6 release date and early public release
- https://github.com/vuejs/vue/releases/tag/1.0.0
Supports
- Vue 1.0 release date and stable major milestone
- https://github.com/vuejs/vue/releases/tag/v2.0.0
Supports
- Vue 2.0 release date and renderer changes
- https://github.com/vuejs/vue-cli/releases/tag/v3.0.0
Supports
- Vue CLI 3 release date and plugin-based tooling
- https://github.com/vuejs/vue/releases/tag/v2.6.0
Supports
- Vue 2.6 release date and slot syntax changes
- https://blog.vuejs.org/posts/vue-3-one-piece
Supports
- Vue 3 release date, Composition API, renderer, reactivity, TypeScript, and built-ins
- https://blog.vuejs.org/posts/vue-3.2
Supports
- Vue 3.2 release date and stable script setup and style state bindings
- https://blog.vuejs.org/posts/vue-3-as-the-new-default
Supports
- Vue 3 default transition date and ecosystem changes
- https://blog.vuejs.org/posts/vue-2-7-naruto
Supports
- Vue 2.7 release date and backported Composition API features
- https://v2.vuejs.org/eol/
Supports
- Vue 2 end-of-life date and maintenance status
- https://blog.vuejs.org/posts/vue3-5
Supports
- Vue 3.5 release date, reactivity changes, watcher cleanup, and hydration improvements