From bca310d8939ccb015cb3b5e97f48838312e7b5ac Mon Sep 17 00:00:00 2001
From: Alan Sprecacenere <alan@qreate.it>
Date: Sun, 9 Feb 2020 16:27:53 +0100
Subject: [PATCH 1/3] Support for specifying MqLayout's component tag

---
 README.md        | 5 +++--
 src/component.js | 7 ++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e4f9bb6..980c815 100644
--- a/README.md
+++ b/README.md
@@ -111,8 +111,9 @@ In addition to `$mq` property this plugin provide a wrapper component to facilit
   <span> Display on sm and lg </span>
 </mq-layout>
 ```
-**Props**
-mq => required : String | Array
+**Props**: 
+`mq`: (required) String | Array 
+`tag`: (required) String, default to `div`
 
 *Important*: note that you can append a `+` modifier at the end of the string to specify that the conditional rendering happens for all greater breakpoints.
 
diff --git a/src/component.js b/src/component.js
index 7a5556b..39e5de5 100644
--- a/src/component.js
+++ b/src/component.js
@@ -8,6 +8,11 @@ const component = {
     mq: {
       required: true,
       type: [String, Array],
+    },
+    tag: {
+      required: true,
+      type: String,
+      default: 'div'
     }
   },
   computed: {
@@ -22,7 +27,7 @@ const component = {
   },
   render(h, props) {
     const shouldRenderChildren = this.activeBreakpoints.includes(this.$mq)
-    return shouldRenderChildren ? h('div', this.$slots.default) : h()
+    return shouldRenderChildren ? h(this.tag, this.$slots.default) : h()
   },
 }
 

From 263a48504aec62956591d66f5e69d205485d2d6f Mon Sep 17 00:00:00 2001
From: Alan Sprecacenere <alan@qreate.it>
Date: Sun, 9 Feb 2020 16:28:49 +0100
Subject: [PATCH 2/3] Fix README line breaks

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 980c815..70dd681 100644
--- a/README.md
+++ b/README.md
@@ -111,8 +111,8 @@ In addition to `$mq` property this plugin provide a wrapper component to facilit
   <span> Display on sm and lg </span>
 </mq-layout>
 ```
-**Props**: 
-`mq`: (required) String | Array 
+**Props**:  
+`mq`: (required) String | Array  
 `tag`: (required) String, default to `div`
 
 *Important*: note that you can append a `+` modifier at the end of the string to specify that the conditional rendering happens for all greater breakpoints.

From 97125ca7ce4c15fd6c1708e50c53d52179135218 Mon Sep 17 00:00:00 2001
From: Alan Sprecacenere <alan@qreate.it>
Date: Sun, 9 Feb 2020 16:30:05 +0100
Subject: [PATCH 3/3] Fix README about the mq tag

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 70dd681..3f5dc38 100644
--- a/README.md
+++ b/README.md
@@ -115,7 +115,7 @@ In addition to `$mq` property this plugin provide a wrapper component to facilit
 `mq`: (required) String | Array  
 `tag`: (required) String, default to `div`
 
-*Important*: note that you can append a `+` modifier at the end of the string to specify that the conditional rendering happens for all greater breakpoints.
+*Important*: note that you can append a `+` modifier at the end of the `mq` string to specify that the conditional rendering happens for all greater breakpoints.
 
 ## SSR Support
 v1.0+ now supports SSR. You can customize the `defaultBreakpoint` which let you set the breakpoint used by the server-side-rendering