Convert Figma logo to code with AI

vuejs logocore

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

46,633
8,180
46,633
872

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 Core is the repository for the core functionality of Vue.js, a progressive JavaScript framework for building user interfaces. It contains the source code for Vue's reactivity system, component model, and rendering engine, forming the foundation of the Vue ecosystem.

Pros

  • Lightweight and performant, with a small bundle size
  • Flexible and easy to integrate into existing projects
  • Comprehensive documentation and active community support
  • Reactive and composable architecture

Cons

  • Learning curve for advanced features and concepts
  • Ecosystem fragmentation between Vue 2 and Vue 3
  • Limited native mobile development support compared to React Native
  • Smaller job market compared to React

Code Examples

  1. Creating a reactive object:
import { reactive } from 'vue'

const state = reactive({
  count: 0
})

console.log(state.count) // 0
state.count++
console.log(state.count) // 1
  1. Defining a component using the Composition API:
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    function increment() {
      count.value++
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
}
  1. Rendering a list with v-for:
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ])

    return { items }
  }
}
</script>

Getting Started

To start using Vue.js in your project:

  1. Install Vue.js using npm:
npm install vue@next
  1. Create a new Vue application:
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')
  1. Create a simple component:
<!-- App.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue 3!')
    return { message }
  }
}
</script>

This sets up a basic Vue 3 application with a single component displaying a message.

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 state management and routing
  • More verbose syntax compared to Vue's template-based approach

Code Comparison

React component:

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

Vue component:

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

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

React and Vue are both popular JavaScript frameworks for building user interfaces. React, developed by Facebook, offers a more flexible and powerful approach, while Vue, created by Evan You, provides a simpler and more intuitive development experience. React's virtual DOM and JSX syntax allow for efficient rendering and component composition, whereas Vue's template-based approach and reactive data model make it easier to get started and maintain smaller projects. Ultimately, the choice between React and Vue depends on project requirements, team expertise, and personal preference.

95,657

Deliver web apps with confidence 🚀

Pros of Angular

  • Full-featured framework with built-in solutions for routing, forms, and HTTP
  • Powerful dependency injection system for better modularity and testability
  • TypeScript-first approach, providing strong typing and enhanced tooling

Cons of Angular

  • Steeper learning curve due to its comprehensive nature and complexity
  • Larger bundle size, potentially impacting initial load times
  • More opinionated structure, which may limit flexibility in some cases

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' };
  }
}

Both frameworks use a component-based architecture, but Angular's approach is more verbose and relies heavily on decorators and TypeScript features. Vue's syntax is generally more concise and flexible, allowing for easier adoption in existing projects.

Angular's template syntax uses square brackets for property binding and parentheses for event binding, while Vue uses v-bind (or :) and v-on (or @) directives respectively. Angular's two-way binding uses [(ngModel)], whereas Vue uses v-model.

Overall, Angular provides a more comprehensive solution out-of-the-box, while Vue offers simplicity and flexibility, allowing developers to incrementally adopt its features.

78,194

Cybernetically enhanced web apps

Pros of Svelte

  • Smaller bundle sizes 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 documentation and learning resources

Code Comparison

Svelte component:

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicks: {count}
</button>

Vue component:

<template>
  <button @click="increment">
    Clicks: {{ count }}
  </button>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Both Svelte and Vue are popular frontend frameworks, but they have different approaches to building user interfaces. Svelte compiles components at build time, resulting in smaller bundle sizes and improved performance. Vue, on the other hand, has a larger ecosystem and more extensive documentation, making it easier for developers to find resources and solutions to common problems. The code comparison shows that Svelte's syntax is more concise, while Vue's template and script separation may be more familiar to some 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 initial render and updates
  • Easier integration with existing JavaScript codebases

Cons of Preact

  • Less extensive ecosystem and community support
  • Fewer built-in features and official tooling
  • Steeper learning curve for developers new to React-like syntax

Code Comparison

Preact:

import { h, render } from 'preact';

const App = () => <h1>Hello, World!</h1>;

render(<App />, document.body);

Vue:

<template>
  <h1>Hello, World!</h1>
</template>

<script>
export default {
  name: 'App'
}
</script>

Summary

Preact is a lightweight alternative to React, offering a smaller bundle size and faster performance. It's ideal for projects where size and speed are critical. However, it lacks the extensive ecosystem and built-in features of Vue.

Vue provides a more comprehensive framework with a gentler learning curve and robust official tooling. It's better suited for larger applications and teams that benefit from a more opinionated structure.

The choice between Preact and Vue depends on project requirements, team expertise, and performance needs. Preact excels in size-constrained environments, while Vue offers a more complete solution for complex applications.

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 apps

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 larger 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>

Alpine offers a more concise syntax for simple interactions, while Vue provides a more structured approach with separate template and script sections. Alpine's syntax is inline and doesn't require a build step, making it easier to drop into existing projects. However, Vue's component-based architecture and more extensive feature set make it better suited for larger, more complex applications.

32,037

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

Pros of Solid

  • Smaller bundle size and faster runtime performance
  • Fine-grained reactivity without virtual DOM
  • Simpler mental model with less abstraction

Cons of Solid

  • Smaller ecosystem and community compared to Vue
  • Less mature tooling and documentation
  • Steeper learning curve for developers used to traditional frameworks

Code Comparison

Vue.js:

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

Solid:

import { createSignal } from "solid-js";

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

Both examples create a simple counter component, but Solid uses signals and fine-grained reactivity, while Vue relies on its reactive system and template syntax. Solid's approach results in more explicit reactivity and potentially better performance, while Vue's template syntax may be more familiar to some developers.

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

vuejs/core npm build status Download

Getting Started

Please follow the documentation at vuejs.org!

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 sponsoring Vue's development.

Special Sponsor

special sponsor appwrite

sponsors

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 respect issue requirements and use the new issue helper when opening an issue. Issues not conforming to the guidelines may be closed immediately.

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