diff --git a/CHANGELOG.md b/CHANGELOG.md
index 86f093998..f13f84ea4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Buefy Changelog
 
+## 0.3.2
+
+* Modal can be used in template as well (non programmatic)
+
 ## 0.3.1
 
 * Field ``grouped`` now also works on nested Fields
diff --git a/docs/pages/documentation/general/Modal.vue b/docs/pages/documentation/general/Modal.vue
index a92f631d4..021a10e18 100644
--- a/docs/pages/documentation/general/Modal.vue
+++ b/docs/pages/documentation/general/Modal.vue
@@ -1,28 +1,90 @@
 <template>
     <div class="container">
         <h1 class="title is-spaced">Modal</h1>
-        <h2 class="subtitle">Programatically modal overlay to include any content you may need</h2>
+        <h2 class="subtitle">Classic modal overlay to include any content you may need</h2>
         <hr>
 
         <div class="block">
-            <button class="button is-primary is-medium" @click="imageModal"> Launch image modal</button>
-            <button class="button is-primary is-medium" @click="cardModal"> Launch card modal</button>
+            <button class="button is-primary is-medium" @click="isImageModalActive = true">Launch image modal</button>
+            <button class="button is-primary is-medium" @click="isCardModalActive = true">Launch card modal</button>
         </div>
-        <pre class="content" v-highlight><code class="javascript">{{ code1 | pre }}</code></pre>
+        <b-modal :active.sync="isImageModalActive">
+            <p class="image is-4by3">
+                <img src="static/placeholder-1280x960.png">
+            </p>
+        </b-modal>
+        <b-modal :active.sync="isCardModalActive" :width="640">
+            <div class="card">
+                <div class="card-image">
+                    <figure class="image is-4by3">
+                        <img src="static/placeholder-1280x960.png" alt="Image">
+                    </figure>
+                </div>
+                <div class="card-content">
+                    <div class="media">
+                        <div class="media-left">
+                            <figure class="image is-48x48">
+                                <img src="static/placeholder-1280x960.png" alt="Image">
+                            </figure>
+                        </div>
+                        <div class="media-content">
+                            <p class="title is-4">John Smith</p>
+                            <p class="subtitle is-6">@johnsmith</p>
+                        </div>
+                    </div>
+
+                    <div class="content">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+                        <a>#css</a> <a>#responsive</a>
+                        <br>
+                        <small>11:09 PM - 1 Jan 2016</small>
+                    </div>
+                </div>
+            </div>
+        </b-modal>
+        <pre class="content" v-highlight><code class="html">{{ template1 | pre }}</code></pre>
 
         <hr>
 
-        <h2 class="title is-spaced">Component Modal</h2>
+        <h2 class="title">Component Modal</h2>
         <div class="content">
             <p>A modal with an injected component. When you want to close the Modal, emit a 'close' event — <code>this.$emit('close')</code> — from the component.</p>
             <p>The component will receive all props from the <code>props</code> object.</p>
-            <button class="button is-primary is-medium" @click="componentModal"> Launch component modal</button>
+            <button class="button is-primary is-medium" @click="isComponentModalActive = true">Launch component modal</button>
         </div>
+        <b-modal
+            :active.sync="isComponentModalActive"
+            :component="ModalForm"
+            :props="formProps"
+            :width="380">
+        </b-modal>
+        <pre class="content" v-highlight><code class="html">{{ template2 | pre }}</code></pre>
         <pre class="content" v-highlight><code class="javascript">{{ code2 | pre }}</code></pre>
+
         <h3 class="subtitle">ModalForm component</h3>
         <p class="content"><b>Note:</b> You should't mutate a prop directly, this is just an example.</p>
         <pre class="content" v-highlight><code class="html">{{ component | pre }}</code></pre>
 
+        <hr>
+
+        <h2 class="title is-spaced">Programmatically opening</h2>
+
+        <div class="block">
+            <button class="button is-primary is-medium" @click="imageModal">Launch image modal</button>
+            <button class="button is-primary is-medium" @click="cardModal">Launch card modal</button>
+        </div>
+        <pre class="content" v-highlight><code class="javascript">{{ code3 | pre }}</code></pre>
+
+        <hr>
+
+        <h2 class="title">Programmatically opening Component Modal</h2>
+        <div class="content">
+            <p>A modal with an injected component. When you want to close the Modal, emit a 'close' event — <code>this.$emit('close')</code> — from the component.</p>
+            <p>The component will receive all props from the <code>props</code> object.</p>
+            <button class="button is-primary is-medium" @click="componentModal">Launch component modal</button>
+        </div>
+        <pre class="content" v-highlight><code class="javascript">{{ code4 | pre }}</code></pre>
 
         <hr>
 
@@ -46,6 +108,21 @@
                 </b-table-column>
             </template>
         </b-table>
+
+        <h2 class="subtitle">Events</h2>
+        <b-table :data="events" default-sort="name">
+            <template scope="props">
+                <b-table-column field="name" label="Name"
+                    v-html="props.row.name">
+                </b-table-column>
+                <b-table-column field="description" label="Description" width="620"
+                    v-html="props.row.description">
+                </b-table-column>
+                <b-table-column field="parameters" label="Parameters"
+                    v-html="props.row.parameters">
+                </b-table-column>
+            </template>
+        </b-table>
     </div>
 </template>
 
@@ -55,9 +132,22 @@
     export default {
         data() {
             return {
-                email: 'evan@you.com',
-                password: 'testing',
+                ModalForm,
+                isImageModalActive: false,
+                isCardModalActive: false,
+                isComponentModalActive: false,
+                formProps: {
+                    email: 'evan@you.com',
+                    password: 'testing'
+                },
                 props: [
+                    {
+                        name: '<code>active</code>',
+                        description: 'Whether modal is active or not, use the <code>.sync</code> modifier to make it two-way binding',
+                        type: 'Boolean',
+                        values: '—',
+                        default: '<code>false</code>'
+                    },
                     {
                         name: '<code>component</code>',
                         description: `Component to be shown. Close Modal programatically by emitting a 'close' event — <code>this.$emit('close')</code> — from the component`,
@@ -67,7 +157,7 @@
                     },
                     {
                         name: '<code>props</code>',
-                        description: 'Props to be binded to the component',
+                        description: 'Props to be binded to the injected component',
                         type: 'Object',
                         values: '—',
                         default: '—'
@@ -101,7 +191,79 @@
                         default: '—'
                     }
                 ],
-                code1: `
+                events: [
+                    {
+                        name: '<code>close</code>',
+                        description: 'Triggers when user closed/canceled or called programmatically from the injected component',
+                        parameters: '—'
+                    }
+                ],
+                template1: `
+                <button class="button is-primary is-medium" @click="isImageModalActive = true">Launch image modal</button>
+                <button class="button is-primary is-medium" @click="isCardModalActive = true">Launch card modal</button>
+
+                <b-modal :active.sync="isImageModalActive">
+                    <p class="image is-4by3">
+                        <img src="static/placeholder-1280x960.png">
+                    </p>
+                </b-modal>
+
+                <b-modal :active.sync="isCardModalActive" :width="640">
+                    <div class="card">
+                        <div class="card-image">
+                            <figure class="image is-4by3">
+                                <img src="static/placeholder-1280x960.png" alt="Image">
+                            </figure>
+                        </div>
+                        <div class="card-content">
+                            <div class="media">
+                                <div class="media-left">
+                                    <figure class="image is-48x48">
+                                        <img src="static/placeholder-1280x960.png" alt="Image">
+                                    </figure>
+                                </div>
+                                <div class="media-content">
+                                    <p class="title is-4">John Smith</p>
+                                    <p class="subtitle is-6">@johnsmith</p>
+                                </div>
+                            </div>
+
+                            <div class="content">
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                                Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+                                <a>#css</a> <a>#responsive</a>
+                                <br>
+                                <small>11:09 PM - 1 Jan 2016</small>
+                            </div>
+                        </div>
+                    </div>
+                </b-modal>
+                `,
+                template2: `
+                <button class="button is-primary is-medium" @click="isComponentModalActive = true">Launch component modal</button>
+
+                <b-modal
+                    :active.sync="isComponentModalActive"
+                    :component="ModalForm"
+                    :props="formProps"
+                    :width="380">
+                </b-modal>`,
+                code2: `
+                import ModalForm from './components/ModalForm'
+
+                export default {
+                    data() {
+                        return {
+                            ModalForm,
+                            isComponentModalActive: false,
+                            formProps: {
+                                email: 'evan@you.com',
+                                password: 'testing'
+                            }
+                        }
+                    }
+                }`,
+                code3: `
                 export default {
                     methods: {
                         imageModal() {
@@ -117,28 +279,28 @@
                                 content: \`<div class="card">
                                     <div class="card-image">
                                         <figure class="image is-4by3">
-                                        <img src="./static/placeholder-1280x960.png" alt="Image">
+                                            <img src="./static/placeholder-1280x960.png" alt="Image">
                                         </figure>
                                     </div>
                                     <div class="card-content">
                                         <div class="media">
-                                        <div class="media-left">
-                                            <figure class="image is-48x48">
-                                            <img src="./static/placeholder-1280x960.png" alt="Image">
-                                            </figure>
-                                        </div>
-                                        <div class="media-content">
-                                            <p class="title is-4">John Smith</p>
-                                            <p class="subtitle is-6">@johnsmith</p>
-                                        </div>
+                                            <div class="media-left">
+                                                <figure class="image is-48x48">
+                                                    <img src="./static/placeholder-1280x960.png" alt="Image">
+                                                </figure>
+                                            </div>
+                                            <div class="media-content">
+                                                <p class="title is-4">John Smith</p>
+                                                <p class="subtitle is-6">@johnsmith</p>
+                                            </div>
                                         </div>
 
                                         <div class="content">
-                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                                        Phasellus nec iaculis mauris. <a>@bulmaio</a>.
-                                        <a>#css</a> <a>#responsive</a>
-                                        <br>
-                                        <small>11:09 PM - 1 Jan 2016</small>
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                                            Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+                                            <a>#css</a> <a>#responsive</a>
+                                            <br>
+                                            <small>11:09 PM - 1 Jan 2016</small>
                                         </div>
                                     </div>
                                 </div>\`
@@ -146,24 +308,18 @@
                         }
                     }
                 }`,
-                code2: `
+                code4: `
                 import ModalForm from './components/ModalForm'
 
                 export default {
-                    data() {
-                        return {
-                            email: 'evan@you.com',
-                            password: 'testing'
-                        }
-                    },
                     methods: {
                         componentModal() {
                             this.$modal.open({
                                 component: ModalForm,
                                 width: 380,
                                 props: {
-                                    email: this.email,
-                                    password: this.password
+                                    email: 'evan@you.com',
+                                    password: 'testing'
                                 }
                             })
                         }
@@ -227,8 +383,8 @@
                     component: ModalForm,
                     width: 380,
                     props: {
-                        email: this.email,
-                        password: this.password
+                        email: 'evan@you.com',
+                        password: 'testing'
                     }
                 })
             },
diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue
index b971cbed5..a966c7ffc 100644
--- a/src/components/modal/Modal.vue
+++ b/src/components/modal/Modal.vue
@@ -9,7 +9,8 @@
                     :is="component"
                     @close="close">
                 </component>
-                <div v-else v-html="content"></div>
+                <div v-else-if="content" v-html="content"></div>
+                <slot v-else></slot>
             </div>
             <button v-if="canCancel" class="modal-close" @click="cancel"></button>
         </div>
@@ -18,9 +19,12 @@
 
 <script>
     export default {
+        name: 'bModal',
         props: {
+            active: Boolean,
             component: Object,
             content: String,
+            programmatic: Boolean,
             props: Object,
             width: [String, Number],
             canCancel: {
@@ -34,12 +38,17 @@
         },
         data() {
             return {
-                isActive: false,
+                isActive: this.active || false,
                 newWidth: typeof this.width === 'number'
                     ? this.width + 'px'
                     : this.width
             }
         },
+        watch: {
+            active(value) {
+                this.isActive = value
+            }
+        },
         methods: {
             /**
              * Close the Modal if canCancel.
@@ -51,17 +60,22 @@
             },
 
             /**
-             * Call the onCancel prop (function) and close the Modal.
+             * Call the onCancel prop (function).
+             * Emit events, and destroy modal if it's programmatic.
              */
             close() {
                 this.onCancel()
-                this.isActive = false
+                this.$emit('close')
+                this.$emit('update:active', false)
 
                 // Timeout for the animation complete before destroying
-                setTimeout(() => {
-                    this.$destroy()
-                    this.$el.remove()
-                }, 150)
+                if (this.programmatic) {
+                    this.isActive = false
+                    setTimeout(() => {
+                        this.$destroy()
+                        this.$el.remove()
+                    }, 150)
+                }
             },
 
             /**
@@ -79,10 +93,11 @@
         },
         beforeMount() {
             // Insert the Modal component in body tag
-            document.body.appendChild(this.$el)
+            // only if it's programmatic
+            this.programmatic && document.body.appendChild(this.$el)
         },
         mounted() {
-            this.isActive = true
+            if (this.programmatic) this.isActive = true
         },
         beforeDestroy() {
             if (typeof window !== 'undefined') {
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
index e9b79526d..2f4e2e61d 100644
--- a/src/components/modal/index.js
+++ b/src/components/modal/index.js
@@ -1,16 +1,18 @@
 import Vue from 'vue'
 import Modal from './Modal'
 
+
+export { Modal }
 export default {
     open(params) {
-        let propsData
-        if (typeof params === 'string') {
-            propsData = {
-                content: params
-            }
-        } else {
-            propsData = params
+        let content
+        if (typeof params === 'string') content = params
+
+        const defaultParam = {
+            programmatic: true,
+            content
         }
+        const propsData = Object.assign(defaultParam, params)
 
         const ModalComponent = Vue.extend(Modal)
         return new ModalComponent({
diff --git a/src/index.js b/src/index.js
index ad7e706c8..ba596cf22 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,7 @@ import Switch from './components/switch'
 import Tooltip from './components/tooltip'
 
 import Dialog from './components/dialog'
-import Modal from './components/modal'
+import ModalProgrammatic, { Modal } from './components/modal'
 import Snackbar from './components/snackbar'
 import Toast from './components/toast'
 
@@ -28,6 +28,7 @@ const components = {
     Icon,
     Input,
     Message,
+    Modal,
     Notification,
     Pagination,
     Radio,
@@ -53,7 +54,7 @@ components.install = (Vue, options = {}) => {
     }
 
     Vue.prototype.$snackbar = Snackbar
-    Vue.prototype.$modal = Modal
+    Vue.prototype.$modal = ModalProgrammatic
     Vue.prototype.$toast = Toast
     Vue.prototype.$dialog = Dialog
 }