diff --git a/docs/rules/README.md b/docs/rules/README.md
index 97117319f..cd0671c44 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -144,6 +144,7 @@ For example:
| [vue/block-spacing](./block-spacing.md) | disallow or enforce spaces inside of blocks after opening block and before closing block | :wrench: |
| [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks | :wrench: |
| [vue/camelcase](./camelcase.md) | enforce camelcase naming convention | |
+| [vue/class-order](./class-order.md) | enforce classnames order | :wrench: |
| [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas | :wrench: |
| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
| [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots | :wrench: |
diff --git a/docs/rules/class-order.md b/docs/rules/class-order.md
new file mode 100644
index 000000000..0c8233e01
--- /dev/null
+++ b/docs/rules/class-order.md
@@ -0,0 +1,21 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/class-order
+description: enforce classnames order
+---
+# vue/class-order
+> enforce classnames order
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :books: Further reading
+
+- [class-order]
+
+[class-order]: https://eslint.org/docs/rules/class-order
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/class-order.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/class-order.js)
diff --git a/lib/index.js b/lib/index.js
index 6c727f241..4424b5562 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -14,6 +14,7 @@ module.exports = {
'block-spacing': require('./rules/block-spacing'),
'brace-style': require('./rules/brace-style'),
'camelcase': require('./rules/camelcase'),
+ 'class-order': require('./rules/class-order'),
'comma-dangle': require('./rules/comma-dangle'),
'comment-directive': require('./rules/comment-directive'),
'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
diff --git a/lib/rules/class-order.js b/lib/rules/class-order.js
new file mode 100644
index 000000000..94cc56bcc
--- /dev/null
+++ b/lib/rules/class-order.js
@@ -0,0 +1,50 @@
+/**
+* @fileoverview Alphabetizes classnames.
+* @author Maciej Chmurski
+*/
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ url: 'https://eslint.vuejs.org/rules/class-order.html',
+ description: 'enforce classnames order',
+ category: undefined
+ },
+ fixable: 'code',
+ schema: []
+ },
+ create: context => {
+ return utils.defineTemplateBodyVisitor(context, {
+ "VAttribute[directive=false][key.name='class']" (node) {
+ const classList = node.value.value
+ const classListSorted = classList.split(' ').sort().join(' ')
+
+ if (classList !== classListSorted) {
+ context.report({
+ node,
+ loc: node.loc,
+ message: 'Classes should be ordered alphabetically.',
+ fix: (fixer) => fixer.replaceTextRange(
+ [node.value.range[0], node.value.range[1]], `"${classListSorted}"`
+ )
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/tests/lib/rules/class-order.js b/tests/lib/rules/class-order.js
new file mode 100644
index 000000000..e6e931ac3
--- /dev/null
+++ b/tests/lib/rules/class-order.js
@@ -0,0 +1,69 @@
+/**
+ * @fileoverview enforce ordering of classes
+ * @author Maciej Chmurski
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/class-order')
+var RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var tester = new RuleTester({
+ parser: 'vue-eslint-parser',
+ parserOptions: { ecmaVersion: 2015 }
+})
+tester.run('class-order', rule, {
+
+ valid: [
+ {
+ filename: 'test.vue',
+ code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: ''
+ }
+ ],
+
+ invalid: [
+ {
+ filename: 'test.vue',
+ code: '',
+ output: '',
+ errors: [{
+ message: 'Classes should be ordered alphabetically.',
+ type: 'VAttribute'
+ }]
+ },
+ {
+ filename: 'test.vue',
+ code:
+ `
+
+
+ `,
+ output:
+ `
+
+
+ `,
+ errors: [
+ {
+ message: 'Classes should be ordered alphabetically.',
+ type: 'VAttribute'
+ }
+ ]
+ }
+ ]
+})