diff --git a/changelog_unreleased/vue/14542.md b/changelog_unreleased/vue/14542.md
new file mode 100644
index 000000000..a90b2997e
--- /dev/null
+++ b/changelog_unreleased/vue/14542.md
@@ -0,0 +1,55 @@
+#### Fix Vue filter detection (#14542 by @fisker)
+
+
+```vue
+
+
+
+ {{
+ fn(
+ bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
+ )
+ | filter1
+ | filter2
+ | filter3
+ | filter4
+ }}
+
+
+
+
+
+
+ {{
+ fn(
+ bitwise
+ | or
+ | operator
+ | a_long_long_long_long_long_long_long_long_long_long_variable
+ )
+ | filter1
+ | filter2
+ | filter3
+ | filter4
+ }}
+
+
+
+
+
+
+ {{
+ fn(
+ bitwise |
+ or |
+ operator |
+ a_long_long_long_long_long_long_long_long_long_long_variable,
+ )
+ | filter1
+ | filter2
+ | filter3
+ | filter4
+ }}
+
+
+```
diff --git a/src/language-js/print/binaryish.js b/src/language-js/print/binaryish.js
index 5bc2f880f..047eb32d0 100644
--- a/src/language-js/print/binaryish.js
+++ b/src/language-js/print/binaryish.js
@@ -229,7 +229,7 @@ function printBinaryishExpressions(
const lineBeforeOperator =
(node.operator === "|>" ||
node.type === "NGPipeExpression" ||
- (node.operator === "|" && options.parser === "__vue_expression")) &&
+ isVueFilterSequenceExpression(path, options)) &&
!hasLeadingOwnLineComment(options.originalText, node.right);
const operator = node.type === "NGPipeExpression" ? "|" : node.operator;
@@ -334,4 +334,17 @@ function shouldInlineLogicalExpression(node) {
return false;
}
+const isBitwiseOrExpression = (node) =>
+ node.type === "BinaryExpression" && node.operator === "|";
+
+function isVueFilterSequenceExpression(path, options) {
+ return (
+ options.parser === "__vue_expression" &&
+ isBitwiseOrExpression(path.node) &&
+ !path.hasAncestor(
+ (node) => !isBitwiseOrExpression(node) && node.type !== "JsExpressionRoot"
+ )
+ );
+}
+
export { printBinaryishExpression, shouldInlineLogicalExpression };
diff --git a/tests/format/vue/interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/format/vue/interpolation/__snapshots__/jsfmt.spec.js.snap
index 91b44d2b1..9ec43f217 100644
--- a/tests/format/vue/interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/vue/interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`bitwise-or-operator.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+ | printWidth
+=====================================input======================================
+
+
+ {{
+ fn(
+ bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
+ )
+ | filter1
+ | filter2
+ | filter3
+ | filter4
+ }}
+
+
+
+=====================================output=====================================
+
+
+ {{
+ fn(
+ bitwise |
+ or |
+ operator |
+ a_long_long_long_long_long_long_long_long_long_long_variable,
+ )
+ | filter1
+ | filter2
+ | filter3
+ | filter4
+ }}
+
+
+
+================================================================================
+`;
+
exports[`parenthesized.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
diff --git a/tests/format/vue/interpolation/bitwise-or-operator.vue b/tests/format/vue/interpolation/bitwise-or-operator.vue
new file mode 100644
index 000000000..ddfac4f11
--- /dev/null
+++ b/tests/format/vue/interpolation/bitwise-or-operator.vue
@@ -0,0 +1,13 @@
+
+
+ {{
+ fn(
+ bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
+ )
+ | filter1
+ | filter2
+ | filter3
+ | filter4
+ }}
+
+