vue
Advanced tools
Package description
Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It is designed to be incrementally adoptable, meaning that it can be used for more than just the interface layer of an application. Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
Reactive Data Binding
Vue.js offers a reactive and composable data binding system. When the state of the application changes, the view automatically updates to reflect the new state.
{"html": "<div id='app'>{{ message }}</div>", "javascript": "var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })"}Components
Vue allows developers to build encapsulated and reusable components, which can have their own state and methods. These components can be composed to build complex user interfaces.
{"javascript": "Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' })"}Directives
Vue provides a set of built-in directives such as v-if, v-for, v-bind, and v-on, which offer functionality to HTML templates, allowing for declarative rendering and handling of user interactions.
{"html": "<p v-if='seen'>Now you see me</p>", "javascript": "new Vue({ el: '#app', data: { seen: true } })"}Transition Effects
Vue has a transition system that can apply automatic transition effects when elements are inserted, updated, or removed from the DOM. This feature allows for adding interactive and engaging animations to the UI.
{"html": "<transition name='fade'><p v-if='show'>Hello Vue!</p></transition>", "javascript": "new Vue({ el: '#app', data: { show: true } })"}Vuex for State Management
For larger applications, Vue can be used with Vuex, a state management pattern and library that helps manage state outside of Vue components for more complex applications.
{"javascript": "const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment: state => state.count++ } })"}Vue Router for Single Page Applications
Vue Router is the official router for Vue.js, which makes it easy to build single-page applications with Vue by allowing different views to be mapped to different paths.
{"javascript": "const router = new VueRouter({ routes: [{ path: '/foo', component: Foo }, { path: '/bar', component: Bar }] })"}React is a JavaScript library for building user interfaces, maintained by Facebook. It focuses on a component-based architecture like Vue but uses a different syntax called JSX for combining markup with JavaScript. React also has a larger ecosystem and more extensive community support.
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is maintained by Google and offers a comprehensive solution with a wide range of features out of the box, including dependency injection, templating, AJAX handling, and more. It is considered to be more opinionated and has a steeper learning curve compared to Vue.
Svelte is a relatively new framework that shifts much of the work to compile time, producing highly optimized vanilla JavaScript at the end. Unlike Vue, which updates the DOM in response to state changes, Svelte writes code that surgically updates the DOM when the state of the app changes.
Ember.js is an opinionated framework for building ambitious web applications. It provides a strong convention-over-configuration philosophy and comes with its own router and state management solutions. Ember is known for its powerful CLI and is often compared to Angular in terms of its all-in-one approach.
Changelog
3.4.1 (2023-12-30)
Read this blog post for an overview of the release highlights.
To fully leverage new features in 3.4, it is recommended to also update the following dependencies when upgrading to 3.4:
If using TSX with Vue, check actions needed in Removed: Global JSX Namespace.
Make sure you are no longer using any deprecated features (if you are, you should have warnings in the console telling you so). They may have been removed in 3.4.
once option to watch (#9034) (a645e7a)using syntax (#8786) (5b2bd1d)defineModel support local mutation by default, remove local option (f74785b), closes /github.com/vuejs/rfcs/discussions/503#discussioncomment-7566278__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ feature flag (#9550) (bc7698d)FunctionalComponent (#8644) (927ab17)AriaAttributes type (#8909) (fd0b6ba)ObjectPlugin and FunctionPlugin types (#8946) (fa4969e), closes #8577DefineProps type (096ba81)PublicProps type (#2403) (44135dc)h with native elements (#9756) (a625376)ComponentInstance type (#5408) (bfb8565)Starting in 3.4, Vue no longer registers the global JSX namespace by default. This is necessary to avoid global namespace collision with React so that TSX of both libs can co-exist in the same project. This should not affect SFC-only users with latest version of Volar.
If you are using TSX, there are two options:
Explicitly set jsxImportSource to 'vue' in tsconfig.json before upgrading to 3.4. You can also opt-in per file by adding a /* @jsxImportSource vue */ comment at the top of the file.
If you have code that depends on the presence of the global JSX namespace, e.g. usage of types like JSX.Element etc., you can retain the exact pre-3.4 global behavior by explicitly referencing vue/jsx, which registers the global JSX namespace.
Note that this is a type-only breaking change in a minor release, which adheres to our release policy.
app.config.unwrapInjectedRef has been removed. It was deprecated and enabled by default in 3.3. In 3.4 it is no longer possible to disable this behavior.@vnodeXXX event listeners in templates are now a compiler error instead of a deprecation warning. Use @vue:XXX listeners instead.v-is directive has been removed. It was deprecated in 3.3. Use the is attribute with vue: prefix instead.Readme
vue(.runtime).global(.prod).js:
<script src="..."> in the browser. Exposes the Vue global.<script src="...">.vue.global.js is the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.vue.runtime.global.js contains only the runtime and requires templates to be pre-compiled during a build step.*.prod.js files for production.vue(.runtime).esm-browser(.prod).js:
<script type="module">.vue(.runtime).esm-bundler.js:
webpack, rollup and parcel.process.env.NODE_ENV guards (must be replaced by bundler)@vue/runtime-core, @vue/runtime-compiler)
esm-bundler builds and will in turn import their dependencies (e.g. @vue/runtime-core imports @vue/reactivity)vue.runtime.esm-bundler.js (default) is runtime only, and requires all templates to be pre-compiled. This is the default entry for bundlers (via module field in package.json) because when using a bundler templates are typically pre-compiled (e.g. in *.vue files).vue.esm-bundler.js: includes the runtime compiler. Use this if you are using a bundler but still want runtime template compilation (e.g. in-DOM templates or templates via inline JavaScript strings). You will need to configure your bundler to alias vue to this file.Detailed Reference on vuejs.org
esm-bundler builds of Vue expose global feature flags that can be overwritten at compile time:
__VUE_OPTIONS_API__
true__VUE_PROD_DEVTOOLS__
false__VUE_PROD_HYDRATION_MISMATCH_DETAILS__
falseThe build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree-shaking in the final bundle.
vue.cjs(.prod).js:
require().target: 'node' and properly externalize vue, this is the build that will be loaded.process.env.NODE_ENV.FAQs
The progressive JavaScript framework for building modern web UI.
We found that vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.