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

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

by Kang Cheng

HTML

<link rel="stylesheet" href="https://unpkg.com/@chengkang/wildfire@0.0.4/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 `firebase.js` -->
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.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 `firebase/wildfire.min.js` -->
<script src="https://unpkg.com/wildfire@0.3.8/dist/firebase/wildfire.min.js"></script>
<script type="text/javascript">
  // Install `Wildfire` on `Vue`	
  wildfire.default.install(Vue, {
    databaseConfig: {
      apiKey: 'AIzaSyB39UJBnIUYAQxu3zKkpyzjTZDDfHt7lzc',
      authDomain: 'wild-fire-ee770.firebaseapp.com',
      databaseURL: 'https://wild-fire-ee770.firebaseio.com',
      projectId: 'wild-fire-ee770',
      storageBucket: 'wild-fire-ee770.appspot.com',
      messagingSenderId: '655484997793'
    },
    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;
}