Add Support for {{}} syntax

index.js

@@ -2,8 +2,29 @@
 import linkify from 'linkifyjs/html'
 
 (function () {
-  function install (el, binding) {
-    el.innerHTML = linkify(el.innerHTML, binding.value)
+  function surround (tagName, content) {
+    return `<${tagName}>${content}</${tagName}>`
+  }
+
+  function traverse (vnode, opts, isParent) {
+    const { text, tag, children } = vnode
+    if (text) return linkify(text, opts)
+    if (children) {
+      const content = children.map(childVNode => traverse(childVNode, opts, false)).join('')
+      if (isParent) return content
+      return surround(tag, content)
+    }
+  }
+
+  function install (el, binding, vnode) {
+    if (vnode.data.domProps && vnode.data.domProps.innerHTML) {
+      // when v-html is used
+      el.innerHTML = linkify(el.innerHTML, binding.value)
+    } else {
+      // when `{{}}` syntax is used
+      const isParent = true
+      el.innerHTML = traverse(vnode, binding.value, isParent)
+    }
   }
 
   if (typeof exports === 'object') {

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "./node_modules/.bin/eslint index.js",
     "build": "./node_modules/.bin/eslint index.js && BABEL_ENV=production && babel index.js -o ./dist/vue-linkify.min.js",
-    "test": "npm build && karma start test/unit/karma.conf.js --single-run"
+    "test": "npm run build && karma start test/unit/karma.conf.js --single-run"
   },
   "keywords": [
     "vue",

test/unit/index.js

@@ -25,4 +25,46 @@ describe('vue-linkify', () => {
     expect(vm.$el.innerHTML).to.be
       .equal('Hello from <a href="http://vuejs.org" class="foo" target="_blank">vuejs.org</a>')
   })
+
+  it('should correctly linkify content with {{}} syntax', () => {
+    const vm = new Vue({
+      el: document.createElement('div'),
+      data: {
+        msg: 'https://vuejs.org'
+      },
+      template: '<h v-linkified>Site url: {{ msg }}</h>'
+    }).$mount()
+
+    expect(vm.$el.innerHTML).to.be
+      .equal('Site url: <a href="https://vuejs.org" class="linkified" target="_blank">https://vuejs.org</a>')
+  })
+
+  it('should correctly linkify content with {{}} syntax and options', () => {
+    const vm = new Vue({
+      el: document.createElement('div'),
+      data: {
+        msg: 'https://vuejs.org'
+      },
+      template: '<h v-linkified v-linkified:options="{ className: \'foo\' }">Site url: {{ msg }}</h>'
+    }).$mount()
+
+    expect(vm.$el.innerHTML).to.be
+      .equal('Site url: <a href="https://vuejs.org" class="foo" target="_blank">https://vuejs.org</a>')
+  })
+
+  it('should correctly linkify content with {{}} even after update', () => {
+    const vm = new Vue({
+      el: document.createElement('div'),
+      data: {
+        msg: 'https://vuejs.org'
+      },
+      template: '<h v-linkified>Site url: {{ msg }}</h>'
+    }).$mount()
+
+    vm.msg = 'https://reactjs.org'
+    Vue.nextTick(() => {
+      expect(vm.$el.innerHTML).to.be
+        .equal('Site url: <a href="https://reactjs.org" class="linkified" target="_blank">https://reactjs.org</a>')
+    })
+  })
 })