Wildfire Example: CDN (wilddog/wildfire.min.js)

Use `Wildfire` with `wilddog/wildfire.min.js` from CDN.

by Kang Cheng

HTML

<link rel="stylesheet" href="https://unpkg.com/@chengkang/wildfire/dist/wilddog/static/wildfire.css">
<div id="app">
  <header>
    <h1>Wildfire Example</h1>
    <h3>Use Wildfire with `script` tag.</h3>
  </header>
  <!-- Use `Wildfire` with custom tag -->
  <wildfire></wildfire>
</div>
<!-- Load `Vue.js` -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Load `wilddog.js` -->
<script src="https://cdn.wilddog.com/sdk/js/2.5.17/wilddog.js"></script>
<!-- Load `wildfire.css` -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/wildfire@0.3.8/dist/firebase/static/wildfire.css">
<!-- Load `wilddog/wildfire.min.js` -->
<script src="https://unpkg.com/wildfire@0.3.8/dist/wilddog/wildfire.min.js"></script>
<script type="text/javascript">
	// Install `Wildfire` on `Vue`	
  wildfire.default.install(Vue, {
    databaseConfig: {
      siteId: 'wd2168973289ifdmcg'
    },
    pageURL: 'http://chengkang.me/wildfire',
    pageTitle: 'Wildfire Demo',
    theme: 'light',
    locale: 'zh-CN',
    defaultAvatarURL: 'https://image.flaticon.com/icons/svg/621/621863.svg'
  })
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })

</script>

CSS

#app {
  max-width: 560px;
  margin: 0 auto;
}