Convert Figma logo to code with AI

vuejs logovue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

207,677
33,667
207,677
602

Top Related Projects

227,213

The library for web and native user interfaces.

95,657

Deliver web apps with confidence 🚀

78,194

Cybernetically enhanced web apps

36,546

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

27,910

A rugged, minimal framework for composing JavaScript behavior in your markup.

32,037

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Quick Overview

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable, allowing developers to start with a simple integration and scale up to complex single-page applications as needed. Vue.js focuses on the view layer of an application and provides a declarative and component-based programming model.

Pros

  • Easy to learn and integrate into existing projects
  • Lightweight and performant compared to other frameworks
  • Flexible and scalable architecture
  • Comprehensive documentation and strong community support

Cons

  • Smaller ecosystem compared to React or Angular
  • Limited resources for large-scale enterprise applications
  • Potential for over-flexibility in large teams without proper standards
  • Fewer job opportunities compared to more established frameworks

Code Examples

  1. Basic Vue component:
<template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="changeGreeting">Change Greeting</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, Vue!'
    }
  },
  methods: {
    changeGreeting() {
      this.greeting = 'Welcome to Vue.js!'
    }
  }
}
</script>

This example shows a simple Vue component with a template, data property, and a method.

  1. Vue 3 Composition API:
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

This example demonstrates the use of Vue 3's Composition API with reactive state and a function.

  1. Vue Router integration:
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

This code snippet shows how to set up basic routing in a Vue.js application using Vue Router.

Getting Started

To start a new Vue.js project, you can use the Vue CLI:

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

For a quick setup without build tools, you can use Vue 3 with CDN:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

This HTML file includes Vue 3 from a CDN and creates a simple Vue application.

Competitor Comparisons

227,213

The library for web and native user interfaces.

Pros of React

  • Larger ecosystem and community support
  • Better suited for large-scale applications
  • More mature and battle-tested in production environments

Cons of React

  • Steeper learning curve, especially for beginners
  • Requires additional libraries for full functionality (e.g., routing)
  • JSX syntax can be confusing for developers new to the framework

Code Comparison

React component:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Vue component:

<template>
  <h1>Hello, {{ name }}</h1>
</template>

<script>
export default {
  props: ['name']
}
</script>

React uses JSX syntax, combining HTML-like structure with JavaScript, while Vue separates template and script sections. React components are typically pure JavaScript functions or classes, whereas Vue components have a more structured format with clear separation of concerns.

Both frameworks offer component-based architecture, virtual DOM for efficient rendering, and robust tooling. React's flexibility and extensive ecosystem make it popular for complex applications, while Vue's simplicity and gentle learning curve appeal to developers seeking a more approachable framework.

95,657

Deliver web apps with confidence 🚀

Pros of Angular

  • Full-featured framework with built-in tools for routing, forms, and HTTP client
  • TypeScript support out of the box, providing better type checking and tooling
  • Dependency injection system for better modularity and testability

Cons of Angular

  • Steeper learning curve due to its comprehensive nature and TypeScript requirement
  • More verbose syntax and boilerplate code compared to Vue
  • Larger bundle size, which can impact initial load times for applications

Code Comparison

Angular component:

@Component({
  selector: 'app-example',
  template: '<h1>{{ title }}</h1>'
})
export class ExampleComponent {
  title = 'Hello, Angular!';
}

Vue component:

export default {
  template: '<h1>{{ title }}</h1>',
  data() {
    return {
      title: 'Hello, Vue!'
    }
  }
}

The Angular example uses TypeScript and decorators, while Vue opts for a more straightforward object-based approach. Angular's component definition is more explicit, but Vue's is more concise. Both frameworks achieve similar results with different syntaxes, reflecting their design philosophies.

78,194

Cybernetically enhanced web apps

Pros of Svelte

  • Smaller bundle size due to compile-time optimization
  • Simpler syntax with less boilerplate code
  • Faster runtime performance, especially for complex applications

Cons of Svelte

  • Smaller ecosystem and community compared to Vue
  • Fewer third-party libraries and tools available
  • Less mature and battle-tested in large-scale production environments

Code Comparison

Vue component:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

Svelte component:

<script>
  let message = 'Hello, Svelte!';
</script>

<div>{message}</div>

The Svelte example demonstrates its more concise syntax, requiring less boilerplate code compared to Vue. Svelte's approach allows for a more straightforward component structure, while Vue follows a more traditional separation of template and script sections.

Both frameworks offer reactive data binding and component-based architecture, but Svelte's compile-time approach results in smaller bundle sizes and potentially better performance. However, Vue's larger ecosystem and extensive community support provide more resources and third-party integrations for developers.

36,546

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Pros of Preact

  • Smaller bundle size (3KB vs Vue's 20KB+)
  • Faster performance due to lightweight nature
  • Easier integration with existing JavaScript codebases

Cons of Preact

  • Smaller ecosystem and community compared to Vue
  • Less comprehensive documentation and learning resources
  • Fewer built-in features and official tooling

Code Comparison

Vue component:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return { message: 'Hello Vue!' }
  }
}
</script>

Preact component:

import { h, Component } from 'preact';

class Greeting extends Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

Summary

Preact is a lightweight alternative to Vue, offering a smaller bundle size and potentially better performance. It's well-suited for projects where size and speed are critical. However, Vue provides a more comprehensive ecosystem, better documentation, and a larger community, making it easier for beginners and offering more advanced features out of the box. The choice between the two depends on project requirements and developer preferences.

27,910

A rugged, minimal framework for composing JavaScript behavior in your markup.

Pros of Alpine

  • Lightweight and minimal, with a smaller learning curve
  • Easy to integrate into existing projects without a build step
  • Ideal for adding interactivity to static sites or enhancing server-rendered applications

Cons of Alpine

  • Limited ecosystem and fewer advanced features compared to Vue
  • Less suitable for large-scale, complex applications
  • Lacks built-in state management solutions for more extensive projects

Code Comparison

Alpine:

<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open">Content</div>
</div>

Vue:

<template>
  <div>
    <button @click="open = !open">Toggle</button>
    <div v-show="open">Content</div>
  </div>
</template>

<script>
export default {
  data() {
    return { open: false }
  }
}
</script>

Both Alpine and Vue offer declarative, reactive programming models for building user interfaces. Alpine's syntax is more compact and can be directly used in HTML, while Vue requires a separate template and script section. Vue provides a more structured approach with better separation of concerns, making it more suitable for larger applications. Alpine's simplicity makes it an excellent choice for adding interactivity to existing projects or creating smaller, focused components.

32,037

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Pros of Solid

  • Faster performance due to its fine-grained reactivity system
  • Smaller bundle size, resulting in quicker load times
  • More predictable and less magical reactivity model

Cons of Solid

  • Smaller ecosystem and community compared to Vue
  • Steeper learning curve for developers new to reactive programming
  • Less mature tooling and third-party library support

Code Comparison

Vue:

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>

Solid:

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  return <div>{count()}</div>;
}

Both Vue and Solid are modern JavaScript frameworks for building user interfaces. Vue offers a more traditional component-based approach with a template syntax, while Solid uses a more functional approach with fine-grained reactivity. Solid's performance advantages come at the cost of a smaller ecosystem and potentially steeper learning curve. Vue's larger community and more extensive tooling make it a safer choice for large-scale projects, while Solid might be preferred for performance-critical applications or by developers who favor its reactivity model.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Vue 2 has reached End of Life

You are looking at the now inactive repository for Vue 2. The actively maintained repository for the latest version of Vue is vuejs/core.

Vue has reached End of Life on December 31st, 2023. It no longer receives new features, updates, or fixes. However, it is still available on all existing distribution channels (CDNs, package managers, Github, etc).

If you are starting a new project, please start with the latest version of Vue (3.x). We also strongly recommend current Vue 2 users to upgrade (guide), but we also acknowledge that not all users have the bandwidth or incentive to do so. If you have to stay on Vue 2 but also have compliance or security requirements about unmaintained software, check out Vue 2 NES.

Vue logo

Build Status Coverage Status Downloads Version License Chat

Sponsors

Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider sponsor Vue's development.

Special Sponsor

special sponsor appwrite

sponsors


Introduction

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.

Browser Compatibility

Vue.js supports all browsers that are ES5-compliant (IE8 and below are not supported).

Ecosystem

ProjectStatusDescription
vue-routervue-router-statusSingle-page application routing
vuexvuex-statusLarge-scale state management
vue-clivue-cli-statusProject scaffolding
vue-loadervue-loader-statusSingle File Component (*.vue file) loader for webpack
vue-server-renderervue-server-renderer-statusServer-side rendering support
vue-class-componentvue-class-component-statusTypeScript decorator for a class-based API
vue-rxvue-rx-statusRxJS integration
vue-devtoolsvue-devtools-statusBrowser DevTools extension

Documentation

To check out live examples and docs, visit vuejs.org.

Questions

For questions and support please use the official forum or community chat. The issue list of this repo is exclusively for bug reports and feature requests.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Changelog

Detailed changes for each release are documented in the release notes.

Stay In Touch

Contribution

Please make sure to read the Contributing Guide before making a pull request. If you have a Vue-related project/component/tool, add it with a pull request to this curated list!

Thank you to all the people who already contributed to Vue!

License

MIT

Copyright (c) 2013-present, Yuxi (Evan) You

NPM DownloadsLast 30 Days