Prettier Plugin for Vue Single File Components (SFCs)

Common errors

Warnings

Install

Imports

• prettier-plugin-vue
  wrong

  // .prettierrc.js
  import prettierPluginVue from 'prettier-plugin-vue';
  module.exports = {
    plugins: [
      prettierPluginVue
    ],
  }

  correct

  // .prettierrc.js or .prettierrc.cjs
  module.exports = {
    plugins: [
      require('prettier-plugin-vue')
    ],
  }

  For CommonJS-based Prettier configurations (e.g., `prettier.config.js` or `.prettierrc.js` in a CJS project), use `require()` to explicitly load the plugin module. ESM `import` statements are not supported in these contexts.

• prettier-plugin-vue (string literal)
  wrong

  // .prettierrc.js (in a CJS context)
  module.exports = {
    plugins: [
      'prettier-plugin-vue'
    ],
  }

  correct

  // .prettierrc.mjs or .prettierrc.js (in an ESM context)
  export default {
    plugins: [
      'prettier-plugin-vue'
    ],
  }

  When explicitly configuring in an ESM context (e.g., `prettier.config.mjs`) or with certain package managers (like pnpm or Yarn PnP where autoloading might fail), the plugin name as a string is typically used in the `plugins` array. This also works in CJS if the plugin is discoverable.

• vueExcludeBlocks
  wrong

  // .prettierrc.js
  module.exports = {
    plugins: [
      {
        'prettier-plugin-vue',
        vueExcludeBlocks: ['style'] // Incorrect nesting
      }
    ]
  }

  correct

  // .prettierrc.js
  module.exports = {
    plugins: [require('prettier-plugin-vue')],
    vueExcludeBlocks: ['style', 'template']
  }

  `vueExcludeBlocks` is a top-level Prettier option, not nested within the plugin definition itself. It applies globally once the `prettier-plugin-vue` plugin is loaded.

Quickstart

This quickstart guides you through installing the plugin, configuring Prettier to exclude style blocks in Vue SFCs, and then demonstrates running Prettier on a sample Vue file to show which blocks are formatted and which are skipped.

// 1. Install dependencies (run in your terminal):
// npm install --save-dev prettier prettier-plugin-vue

// 2. Create a .prettierrc.js file in your project root:
// prettier.config.js
module.exports = {
  vueExcludeBlocks: ['style'], // Instructs prettier-plugin-vue to ignore <style> blocks
  singleQuote: true,
  semi: false,
  trailingComma: 'es5',
  tabWidth: 2,
  printWidth: 100,
};

// 3. Create a sample Vue SFC (e.g., src/components/MyComponent.vue) with some messy formatting:
/*
<template>
  <div class="hello-world">
    <h1>{{ msg }}</h1>
    <p>
      This is a sample component with intentionally
      <span class="highlight">poor formatting</span>
      in its script and style blocks.
    </p>
  </div>
</template>

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

const msg =
  'Hello Vue 3 + TypeScript';
const count = ref(0); // This line will be formatted
const incrementCount = () => {
  count.value++;
};
</script>

<style scoped>
.hello-world {
  font-family: Arial, sans-serif;
  text-align:center;
  color: #2c3e50;
  margin-top:    60px;
}
.highlight {
  color: #42b983;
  font-weight:  bold;
}
</style>
*/

// 4. Run Prettier from your terminal to format files:
// npx prettier --write "src/**/*.vue"

// This command will format the <template> and <script> blocks of your Vue files
// according to the .prettierrc.js rules. However, due to `vueExcludeBlocks: ['style']`,
// the <style> block's formatting (e.g., extra spaces, irregular indentation) will remain
// untouched by Prettier, demonstrating the plugin's core functionality.