Registry / prettier-plugin-vue

prettier-plugin-vue

library1.1.6jsnpmunverified

prettier-plugin-vue is a Prettier plugin designed to enhance the formatting capabilities for Vue Single File Components (SFCs) beyond Prettier's default behavior. Currently at version 1.1.6, this plugin enables developers to precisely control which blocks within an SFC are formatted by Prettier. Its primary differentiator is the `vueExcludeBlocks` option, which allows specific sections (like `<style>` or `<template>`) to be ignored during formatting. This feature is particularly useful for integrating Prettier with other specialized linters such as `eslint` and `stylelint`, preventing formatting conflicts that might arise from multiple tools acting on the same code sections. The plugin autoloads in most setups, streamlining its adoption. While not explicitly stating a release cadence, its presence on npm and active GitHub actions suggest ongoing maintenance, providing a stable solution for Vue formatting challenges. It avoids common issues with IDE-specific formatters by handling exclusions at the Prettier configuration level.

npm install prettier-plugin-vue

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-VU

prettier-plugin-vue

javascriptv1.1.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

prettier-plugin-vue

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

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

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)

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

✗ // .prettierrc.js (in a CJS context) module.exports = { 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

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

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

`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.

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.

Debug

Known issues

gotchaPrettier's plugin autoloading mechanism may not function correctly with certain package managers, specifically pnpm or Yarn PnP, requiring explicit configuration.

fix

To ensure the plugin is loaded, explicitly add `prettier-plugin-vue` to your Prettier configuration's `plugins` array. For CommonJS configs: `plugins: [require('prettier-plugin-vue')]`. For ESM configs: `plugins: ['prettier-plugin-vue']`.

affects: >=1.0.0

gotchaBy default, `prettier-plugin-vue` excludes `<style>` blocks from Prettier's formatting process. This is done to prevent potential conflicts with dedicated CSS linters like `stylelint`.

fix

If you wish for Prettier to format `<style>` blocks within your Vue SFCs, you must explicitly remove `'style'` from the `vueExcludeBlocks` array in your Prettier configuration (e.g., `vueExcludeBlocks: []`). Be aware of potential conflicts if you are also using a style linter.

affects: >=1.0.0

gotchaThe `vueExcludeBlocks` option expects an array of strings, where each string corresponds to the name of a block type (e.g., `'style'`, `'template'`, `'script'`) you wish to exclude from formatting.

fix

Ensure that `vueExcludeBlocks` is correctly defined as an array of string literals in your `.prettierrc` or `prettier.config.js` file, for example: `vueExcludeBlocks: ['style', 'template']`.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'prettier-plugin-vue'

The plugin is either not installed as a dependency or Prettier cannot locate it, which can happen with certain package managers (pnpm, Yarn PnP) that use non-standard `node_modules` structures.

fix

First, ensure `prettier-plugin-vue` is installed as a `devDependency` (`npm install --save-dev prettier-plugin-vue`). Then, explicitly configure it in your `prettier.config.js`: `module.exports = { plugins: [require('prettier-plugin-vue')] }`.

Prettier is not formatting my Vue <style> block, even when I run it.

The `prettier-plugin-vue` defaults to excluding `<style>` blocks from formatting to avoid interfering with dedicated CSS linters like `stylelint`.

fix

To enable Prettier to format `<style>` blocks, you need to override the default configuration. In your `prettier.config.js`, set `vueExcludeBlocks` to an empty array or remove `'style'` from it: `module.exports = { vueExcludeBlocks: [] }`.

SyntaxError: Cannot use import statement outside a module (when configuring Prettier)

Your `prettier.config.js` file is likely being treated as a CommonJS module, which does not support ESM `import` statements at the top level.

fix

Use CommonJS `require()` syntax for loading plugins in `prettier.config.js`: `module.exports = { plugins: [require('prettier-plugin-vue')] }`. If you prefer ESM syntax, rename your configuration file to `prettier.config.mjs`.

Upgrade

Version history

1.1.6latest on npm

Audit

Dependencies

prettierrequiredRuntime dependency for core formatting functionality; required for the plugin to operate.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/voqse/prettier-plugin-vue ↗

packagehttps://www.npmjs.com/package/prettier-plugin-vue ↗