vue

What is vue?

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.

What are vue's main functionalities?

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 }] })"}

Other packages similar to vue

react

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

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

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

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.

README

vue

Which dist file to use?

From CDN or without a Bundler

• vue(.runtime).global(.prod).js:

  • For direct use via <script src="..."> in the browser. Exposes the Vue global.
  • Note that global builds are not UMD builds. They are built as IIFEs and is only meant for direct use via <script src="...">.
  • In-browser template compilation:
    • 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.
  • Inlines all Vue core internal packages - i.e. it's a single file with no dependencies on other files. This means you must import everything from this file and this file only to ensure you are getting the same instance of code.
  • Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the *.prod.js files for production.

• vue(.runtime).esm-browser(.prod).js:

  • For usage via native ES modules imports (in browser via <script type="module">.
  • Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build.

With a Bundler

• vue(.runtime).esm-bundler.js:

  • For use with bundlers like webpack, rollup and parcel.
  • Leaves prod/dev branches with process.env.NODE_ENV guards (must be replaced by bundler)
  • Does not ship minified builds (to be done together with the rest of the code after bundling)
  • Imports dependencies (e.g. @vue/runtime-core, @vue/runtime-compiler)
    • Imported dependencies are also esm-bundler builds and will in turn import their dependencies (e.g. @vue/runtime-core imports @vue/reactivity)
    • This means you can install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version.
  • In-browser template compilation:
    • 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.

Bundler Build Feature Flags

Starting with 3.0.0-rc.3, esm-bundler builds now exposes global feature flags that can be overwritten at compile time:

• __VUE_OPTIONS_API__ (enable/disable Options API support, default: true)
• __VUE_PROD_DEVTOOLS__ (enable/disable devtools support in production, default: false)

The 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. To configure these flags:

• webpack: use DefinePlugin
• Rollup: use @rollup/plugin-replace
• Vite: configured by default, but can be overwritten using the define option

Note: the replacement value must be boolean literals and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions.

For Server-Side Rendering

• vue.cjs(.prod).js:
  • For use in Node.js server-side rendering via require().
  • If you bundle your app with webpack with target: 'node' and properly externalize vue, this is the build that will be loaded.
  • The dev/prod files are pre-built, but the appropriate file is automatically required based on process.env.NODE_ENV.