# Using the Airbnb JavaScript Style Guide with Vue.js: Complete Configuration Guide

> Learn how to use the Airbnb JavaScript style guide with Vue.js. This guide covers complete configuration using airbnb-base and eslint-plugin-vue for seamless integration.

- Repository: [Airbnb/javascript](https://github.com/airbnb/javascript)
- Tags: how-to-guide
- Published: 2026-02-24

---

**Yes, you can apply the Airbnb JavaScript style guide to Vue.js projects by using the `airbnb-base` ESLint configuration combined with `eslint-plugin-vue` for single-file component support.**

The **airbnb/javascript** repository provides industry-standard JavaScript conventions that extend beyond React applications. The `airbnb-base` package contains only generic JavaScript rules without React-specific plugins, making it ideal for Vue.js codebases. When paired with Vue's official ESLint plugin, this setup enforces Airbnb's rigorous standards across both your plain JavaScript files and Vue single-file components.

## Why Airbnb Base Works for Vue.js Projects

The **airbnb-base** configuration is framework-agnostic by design. Unlike the full `eslint-config-airbnb` package—which the root [`package.json`](https://github.com/airbnb/javascript/blob/main/package.json) defines as a meta-package bundling React and JSX rules—`airbnb-base` focuses solely on universal JavaScript best practices.

In [`packages/eslint-config-airbnb-base/rules/imports.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/imports.js), the style guide already recognizes Vue CLI tooling. The `import/no-extraneous-dependencies` rule explicitly treats [`vue.config.js`](https://github.com/airbnb/javascript/blob/main/vue.config.js) as a development-only file, preventing false positive warnings when you import build tools in your Vue configuration.

## Setting Up ESLint for Vue.js with Airbnb Rules

### Installation

According to [`packages/eslint-config-airbnb-base/README.md`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/README.md), you must install the configuration alongside its peer dependencies. Run the following commands to set up the complete linting environment:

```bash

# Install Airbnb base config and peer dependencies

npx install-peerdeps --dev eslint-config-airbnb-base

# Add Vue-specific ESLint support

npm install --save-dev eslint-plugin-vue vue-eslint-parser

```

### Configuration

Create an [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) file in your project root that extends both the Airbnb base rules and Vue's recommended configuration:

```json
{
  "extends": [
    "airbnb-base",
    "plugin:vue/recommended"
  ],
  "plugins": [
    "vue"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true
  }
}

```

The `vue-eslint-parser` enables ESLint to parse Vue single-file components (`*.vue`), while the inner `parser: "babel-eslint"` handles modern JavaScript syntax within your script blocks.

## How the Integration Works

When you execute `npm run lint`, the **Airbnb base rules** enforce general JavaScript conventions—such as `no-unused-vars` and consistent spacing—across both regular `.js` files and the `<script>` sections of Vue components. Meanwhile, **eslint-plugin-vue** adds template-aware checks for Vue-specific syntax and component structure. This layered approach ensures your entire codebase follows consistent standards without conflicts between generic JavaScript rules and Vue's unique patterns.

## Example Vue Component Following Airbnb Standards

The following [`MyComponent.vue`](https://github.com/airbnb/javascript/blob/main/MyComponent.vue) demonstrates code that passes both Airbnb's JavaScript rules and Vue's template validation:

```vue
<template>
  <button @click="increment">{{ count }}</button>
</template>

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

<style scoped>
button {
  cursor: pointer;
}
</style>

```

Running `npm run lint` applies Airbnb's JavaScript conventions to the script block while Vue-specific rules validate the template structure and component definition style.

## Summary

- **airbnb-base** provides framework-agnostic JavaScript rules suitable for Vue projects, excluding React-specific plugins found in the full Airbnb config.
- The `import/no-extraneous-dependencies` rule in [`packages/eslint-config-airbnb-base/rules/imports.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/imports.js) automatically ignores [`vue.config.js`](https://github.com/airbnb/javascript/blob/main/vue.config.js) as a development file.
- Combine `airbnb-base` with `eslint-plugin-vue` and `vue-eslint-parser` to lint both JavaScript logic and Vue templates.
- Use `plugin:vue/recommended` alongside Airbnb rules to ensure comprehensive coverage of Vue single-file components.

## Frequently Asked Questions

### Can I use the full Airbnb config instead of airbnb-base with Vue.js?

You should use **airbnb-base** rather than the full `eslint-config-airbnb` package. The root [`package.json`](https://github.com/airbnb/javascript/blob/main/package.json) in the airbnb/javascript repository defines the full package as a meta-bundle that includes React-specific plugins and JSX rules. These React rules are irrelevant to Vue applications and may cause linting conflicts with Vue's template syntax.

### Does Airbnb's style guide conflict with Vue's recommended rules?

No, the configurations complement each other. Airbnb's rules govern JavaScript syntax and code quality patterns, while Vue's rules handle component structure and template semantics. When extending both `airbnb-base` and `plugin:vue/recommended`, ESLint merges these rule sets without overlap, though you may need to disable specific Airbnb rules in your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) if they contradict Vue conventions.

### How do I handle TypeScript in Vue single-file components with Airbnb rules?

For TypeScript Vue projects, replace `babel-eslint` with `@typescript-eslint/parser` in your `parserOptions.parser` setting while keeping `vue-eslint-parser` as the top-level parser. Install `@typescript-eslint/eslint-plugin` and extend its recommended rules alongside `airbnb-base` to maintain type-aware linting within your `.vue` files.

### Will ESLint check the template section of .vue files?

Yes, when using `vue-eslint-parser` and `eslint-plugin-vue`, ESLint analyzes the `<template>` section for Vue-specific issues like invalid directive syntax or accessibility concerns. However, Airbnb's JavaScript rules apply only to the `<script>` sections, as the base configuration defined in `packages/eslint-config-airbnb-base` does not include HTML or template-specific logic.