diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 8c61d3688..879ec1d57 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -105,11 +105,57 @@ This rule aims to enforce ordering of component attributes. The default order is
       "OTHER_ATTR",
       "EVENTS",
       "CONTENT"
-    ]
+    ],
+    "alphabetical": true
   }]
 }
 ```
 
+### Alphabetical order 
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error', {alphabetical: true}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+    <div
+      a-custom-prop="value"
+      :another-custom-prop="value"
+      :blue-color="false"
+      boolean-prop
+      z-prop="Z"
+      v-on:[c]="functionCall"
+      @change="functionCall"
+      v-on:click="functionCall"
+      @input="functionCall"
+      v-text="textContent">
+    </div>
+
+  <!-- ✗ BAD -->
+    <div
+      z-prop="Z"
+      a-prop="A">
+    </div>
+
+    <div
+      @input="bar"
+      @change="foo">
+    </div>
+
+    <div
+      v-on:click="functionCall"
+      v-on:[c]="functionCall">
+    </div>
+
+    <div
+      :a-prop="A"
+      :z-prop="Z">
+    </div>
+
+</template>
+```
+
+</eslint-code-block>
+
 ### Custom orders
 
 #### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
diff --git a/lib/rules/attributes-order.js b/lib/rules/attributes-order.js
index afa0b3c5a..ac8afe283 100644
--- a/lib/rules/attributes-order.js
+++ b/lib/rules/attributes-order.js
@@ -22,6 +22,14 @@ const ATTRS = {
   CONTENT: 'CONTENT'
 }
 
+function getAttributeName (attribute, sourceCode) {
+  const isBind = attribute.directive && attribute.key.name.name === 'bind'
+  debugger
+  return isBind
+    ? (attribute.key.argument ? sourceCode.getText(attribute.key.argument) : '')
+    : (attribute.directive ? sourceCode.getText(attribute.key.argument) : attribute.key.name)
+}
+
 function getAttributeType (attribute, sourceCode) {
   const isBind = attribute.directive && attribute.key.name.name === 'bind'
   const name = isBind
@@ -64,6 +72,14 @@ function getPosition (attribute, attributePosition, sourceCode) {
   return attributePosition.hasOwnProperty(attributeType) ? attributePosition[attributeType] : -1
 }
 
+function isAlphabetical (prevNode, currNode, sourceCode) {
+  const isSameType = getAttributeType(prevNode, sourceCode) === getAttributeType(currNode, sourceCode)
+  if (isSameType) {
+    return getAttributeName(prevNode, sourceCode) < getAttributeName(currNode, sourceCode)
+  }
+  return true
+}
+
 function create (context) {
   const sourceCode = context.getSourceCode()
   let attributeOrder = [ATTRS.DEFINITION, ATTRS.LIST_RENDERING, ATTRS.CONDITIONALS, ATTRS.RENDER_MODIFIERS, ATTRS.GLOBAL, ATTRS.UNIQUE, ATTRS.TWO_WAY_BINDING, ATTRS.OTHER_DIRECTIVES, ATTRS.OTHER_ATTR, ATTRS.EVENTS, ATTRS.CONTENT]
@@ -110,7 +126,11 @@ function create (context) {
       previousNode = null
     },
     'VAttribute' (node) {
-      if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributePosition, sourceCode))) {
+      let inAlphaOrder = true
+      if (currentPosition !== -1 && (context.options[0] && context.options[0].alphabetical)) {
+        inAlphaOrder = isAlphabetical(previousNode, node, sourceCode)
+      }
+      if ((currentPosition === -1) || ((currentPosition <= getPosition(node, attributePosition, sourceCode)) && inAlphaOrder)) {
         currentPosition = getPosition(node, attributePosition, sourceCode)
         previousNode = node
       } else {
diff --git a/tests/lib/rules/attributes-order.js b/tests/lib/rules/attributes-order.js
index 7ac9aaf59..481148f9d 100644
--- a/tests/lib/rules/attributes-order.js
+++ b/tests/lib/rules/attributes-order.js
@@ -293,6 +293,25 @@ tester.run('attributes-order', rule, {
             v-text="textContent">
           </div>
         </template>`
+    },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div
+            a-custom-prop="value"
+            :another-custom-prop="value"
+            :blue-color="false"
+            boolean-prop
+            z-prop="Z"
+            v-on:[c]="functionCall"
+            @change="functionCall"
+            v-on:click="functionCall"
+            @input="functionCall"
+            v-text="textContent">
+          </div>
+        </template>`,
+      options: [{ alphabetical: true }]
     }
   ],
 
@@ -318,23 +337,23 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code:
-        `<template>
-          <div
-            model="baz"
-            v-model="toggle"
-            propOne="bar"
-            :id="foo">
-          </div>
-        </template>`,
+          `<template>
+            <div
+              model="baz"
+              v-model="toggle"
+              propOne="bar"
+              :id="foo">
+            </div>
+          </template>`,
       output:
-        `<template>
-          <div
-            v-model="toggle"
-            model="baz"
-            :id="foo"
-            propOne="bar">
-          </div>
-        </template>`,
+          `<template>
+            <div
+              v-model="toggle"
+              model="baz"
+              :id="foo"
+              propOne="bar">
+            </div>
+          </template>`,
       errors: [{
         message: 'Attribute "v-model" should go before "model".',
         type: 'VDirectiveKey'
@@ -347,25 +366,25 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code:
-        `<template>
-          <div
-            :bindingProp="foo"
-            model="baz"
-            v-on="functionCall"
-            v-model="toggle"
-            propOne="bar">
-          </div>
-        </template>`,
+          `<template>
+            <div
+              :bindingProp="foo"
+              model="baz"
+              v-on="functionCall"
+              v-model="toggle"
+              propOne="bar">
+            </div>
+          </template>`,
       output:
-        `<template>
-          <div
-            :bindingProp="foo"
-            model="baz"
-            v-model="toggle"
-            v-on="functionCall"
-            propOne="bar">
-          </div>
-        </template>`,
+          `<template>
+            <div
+              :bindingProp="foo"
+              model="baz"
+              v-model="toggle"
+              v-on="functionCall"
+              propOne="bar">
+            </div>
+          </template>`,
       errors: [{
         message: 'Attribute "v-model" should go before "v-on".',
         type: 'VDirectiveKey'
@@ -389,17 +408,17 @@ tester.run('attributes-order', rule, {
       code: '<template><div ref="header" propone="prop" is="header" ></div></template>',
       options: [
         { order:
-          ['LIST_RENDERING',
-            'CONDITIONALS',
-            'RENDER_MODIFIERS',
-            'GLOBAL',
-            'UNIQUE',
-            'TWO_WAY_BINDING',
-            'DEFINITION',
-            'OTHER_DIRECTIVES',
-            'OTHER_ATTR',
-            'EVENTS',
-            'CONTENT']
+            ['LIST_RENDERING',
+              'CONDITIONALS',
+              'RENDER_MODIFIERS',
+              'GLOBAL',
+              'UNIQUE',
+              'TWO_WAY_BINDING',
+              'DEFINITION',
+              'OTHER_DIRECTIVES',
+              'OTHER_ATTR',
+              'EVENTS',
+              'CONTENT']
         }],
       output: '<template><div ref="header" is="header" propone="prop" ></div></template>',
       errors: [{
@@ -410,17 +429,17 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code:
-        `<template>
-          <div v-cloak
-            is="header">
-          </div>
-        </template>`,
+          `<template>
+            <div v-cloak
+              is="header">
+            </div>
+          </template>`,
       output:
-        `<template>
-          <div is="header"
-            v-cloak>
-          </div>
-        </template>`,
+          `<template>
+            <div is="header"
+              v-cloak>
+            </div>
+          </template>`,
       errors: [{
         message: 'Attribute "is" should go before "v-cloak".',
         type: 'VIdentifier'
@@ -429,37 +448,37 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code:
-        `<template>
-          <div
-            v-if="!visible"
-            v-for="item in items"
-            v-once
-            is="header"
-            v-on:click="functionCall"
-            ref="header"
-            :prop="headerData"
-            v-text="textContent"
-            id="uniqueID"
-            myProp="prop"
-            >
-          </div>
-        </template>`,
+          `<template>
+            <div
+              v-if="!visible"
+              v-for="item in items"
+              v-once
+              is="header"
+              v-on:click="functionCall"
+              ref="header"
+              :prop="headerData"
+              v-text="textContent"
+              id="uniqueID"
+              myProp="prop"
+              >
+            </div>
+          </template>`,
       output:
-        `<template>
-          <div
-            v-for="item in items"
-            v-if="!visible"
-            is="header"
-            v-once
-            ref="header"
-            v-on:click="functionCall"
-            :prop="headerData"
-            id="uniqueID"
-            v-text="textContent"
-            myProp="prop"
-            >
-          </div>
-        </template>`,
+          `<template>
+            <div
+              v-for="item in items"
+              v-if="!visible"
+              is="header"
+              v-once
+              ref="header"
+              v-on:click="functionCall"
+              :prop="headerData"
+              id="uniqueID"
+              v-text="textContent"
+              myProp="prop"
+              >
+            </div>
+          </template>`,
       errors: [
         {
           message: 'Attribute "v-for" should go before "v-if".',
@@ -490,53 +509,53 @@ tester.run('attributes-order', rule, {
     {
       filename: 'test.vue',
       code:
-        `<template>
-          <div
-            v-if="!visible"
-            v-for="item in items"
-            v-once
-            is="header"
-            v-on:click="functionCall"
-            ref="header"
-            :prop="headerData"
-            v-text="textContent"
-            id="uniqueID"
-            myProp="prop"
-            >
-          </div>
-        </template>`,
+          `<template>
+            <div
+              v-if="!visible"
+              v-for="item in items"
+              v-once
+              is="header"
+              v-on:click="functionCall"
+              ref="header"
+              :prop="headerData"
+              v-text="textContent"
+              id="uniqueID"
+              myProp="prop"
+              >
+            </div>
+          </template>`,
       options: [
         { order:
-          [
-            'EVENTS',
-            'TWO_WAY_BINDING',
-            'UNIQUE',
-            'DEFINITION',
-            'CONDITIONALS',
-            'LIST_RENDERING',
-            'RENDER_MODIFIERS',
-            'GLOBAL',
-            'OTHER_ATTR',
-            'OTHER_DIRECTIVES',
-            'CONTENT'
-          ]
+            [
+              'EVENTS',
+              'TWO_WAY_BINDING',
+              'UNIQUE',
+              'DEFINITION',
+              'CONDITIONALS',
+              'LIST_RENDERING',
+              'RENDER_MODIFIERS',
+              'GLOBAL',
+              'OTHER_ATTR',
+              'OTHER_DIRECTIVES',
+              'CONTENT'
+            ]
         }],
       output:
-        `<template>
-          <div
-            v-if="!visible"
-            v-for="item in items"
-            is="header"
-            v-once
-            v-on:click="functionCall"
-            ref="header"
-            :prop="headerData"
-            id="uniqueID"
-            v-text="textContent"
-            myProp="prop"
-            >
-          </div>
-        </template>`,
+          `<template>
+            <div
+              v-if="!visible"
+              v-for="item in items"
+              is="header"
+              v-once
+              v-on:click="functionCall"
+              ref="header"
+              :prop="headerData"
+              id="uniqueID"
+              v-text="textContent"
+              myProp="prop"
+              >
+            </div>
+          </template>`,
       errors: [
         {
           message: 'Attribute "is" should go before "v-once".',
@@ -562,39 +581,39 @@ tester.run('attributes-order', rule, {
     },
     {
       code:
-        `<template>
-          <div
-            class="content"
-            v-if="!visible"
-            :class="className"
-            v-text="textContent"
-            >
-          </div>
-        </template>`,
+          `<template>
+            <div
+              class="content"
+              v-if="!visible"
+              :class="className"
+              v-text="textContent"
+              >
+            </div>
+          </template>`,
       options: [
         { order:
-          [
-            'CONDITIONALS',
-            'LIST_RENDERING',
-            'RENDER_MODIFIERS',
-            'DEFINITION',
-            'EVENTS',
-            'UNIQUE',
-            ['BINDING', 'OTHER_ATTR'],
-            'CONTENT',
-            'GLOBAL'
-          ]
+            [
+              'CONDITIONALS',
+              'LIST_RENDERING',
+              'RENDER_MODIFIERS',
+              'DEFINITION',
+              'EVENTS',
+              'UNIQUE',
+              ['BINDING', 'OTHER_ATTR'],
+              'CONTENT',
+              'GLOBAL'
+            ]
         }],
       output:
-        `<template>
-          <div
-            v-if="!visible"
-            class="content"
-            :class="className"
-            v-text="textContent"
-            >
-          </div>
-        </template>`,
+          `<template>
+            <div
+              v-if="!visible"
+              class="content"
+              :class="className"
+              v-text="textContent"
+              >
+            </div>
+          </template>`,
       errors: [
         {
           message: 'Attribute "v-if" should go before "class".',
@@ -604,29 +623,161 @@ tester.run('attributes-order', rule, {
     },
     {
       code:
-        `<template>
-          <my-component
-            v-if="!visible"
-            v-model="content"
-            v-slot="textContent"
-            >
-          </my-component>
-        </template>`,
+          `<template>
+            <my-component
+              v-if="!visible"
+              v-model="content"
+              v-slot="textContent"
+              >
+            </my-component>
+          </template>`,
       output:
-        `<template>
-          <my-component
-            v-if="!visible"
-            v-slot="textContent"
-            v-model="content"
-            >
-          </my-component>
-        </template>`,
+          `<template>
+            <my-component
+              v-if="!visible"
+              v-slot="textContent"
+              v-model="content"
+              >
+            </my-component>
+          </template>`,
       errors: [
         {
           message: 'Attribute "v-slot" should go before "v-model".',
           nodeType: 'VIdentifier'
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code:
+      `<template>
+          <div
+            z-prop="Z"
+            a-prop="A">
+          </div>
+        </template>`,
+      options: [{ alphabetical: true }],
+      output:
+        `<template>
+          <div
+            a-prop="A"
+            z-prop="Z">
+          </div>
+        </template>`,
+      errors: [{
+        message: 'Attribute "a-prop" should go before "z-prop".',
+        type: 'VIdentifier'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code:
+      `<template>
+          <div
+            :z-prop="Z"
+            :a-prop="A">
+          </div>
+        </template>`,
+      options: [{ alphabetical: true }],
+      output:
+        `<template>
+          <div
+            :a-prop="A"
+            :z-prop="Z">
+          </div>
+        </template>`,
+      errors: [{
+        message: 'Attribute ":a-prop" should go before ":z-prop".',
+        type: 'VDirectiveKey'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div
+            @input="bar"
+            @change="foo">
+          </div>
+        </template>`,
+      options: [{ alphabetical: true }],
+      output:
+        `<template>
+          <div
+            @change="foo"
+            @input="bar">
+          </div>
+        </template>`,
+      errors: [{
+        message: 'Attribute "@change" should go before "@input".',
+        type: 'VDirectiveKey'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div
+            z-prop="value"
+            boolean-prop>
+          </div>
+        </template>`,
+      options: [{ alphabetical: true }],
+      output:
+        `<template>
+          <div
+            boolean-prop
+            z-prop="value">
+          </div>
+        </template>`,
+      errors: [{
+        message: 'Attribute "boolean-prop" should go before "z-prop".',
+        type: 'VIdentifier'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div
+            v-on:click="functionCall"
+            v-on:[c]="functionCall">
+          </div>
+        </template>`,
+      options: [{ alphabetical: true }],
+      output:
+        `<template>
+          <div
+            v-on:[c]="functionCall"
+            v-on:click="functionCall">
+          </div>
+        </template>`,
+      errors: [{
+        message: 'Attribute "v-on:[c]" should go before "v-on:click".',
+        type: 'VDirectiveKey'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div
+            v-text="textContent"
+            v-on:click="functionCall">
+          </div>
+        </template>`,
+      options: [{ alphabetical: true }],
+      output:
+        `<template>
+          <div
+            v-on:click="functionCall"
+            v-text="textContent">
+          </div>
+        </template>`,
+      errors: [{
+        message: 'Attribute "v-on:click" should go before "v-text".',
+        type: 'VDirectiveKey'
+      }]
     }
   ]
 })