How to use vue-contentservice

Add content management to your project in 2 minutes.

by philcal

HTML

<script src="https://unpkg.com/vue-contentservice@latest/dist/vue-contentservice.umd.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<html>

  <head>
    <!-- Bulma -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
    <!-- Font-awesome -->
    <!--
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
    -->
    <!-- Content Service -->
    <link rel="stylesheet" href="https://unpkg.com/vue-contentservice@latest/dist/vue-contentservice.css">
  </head>
  
  <body>
    <div id="app">
        <content-layout-editor :editable="editable" :anchor="anchor"> 
        </content-layout-editor>
    </div>
    
  </body>

</html>

Vue

/*
 * STEPS TO MAKE THIS YOURS...
 * 1. Clone this sandbox.
 * 2. Open an account at http://tooltwist.com.
 * 3. Define a new App and get an APIKey.
 * 4. Set the APIKey below.
 * 5. Experiment with the options
 */
Vue.use(window.ContentService, {
  //protocol: 'https',
  host: 'uat.crowdhound.io',
  //port: 443,
  version: '2.0',
  apikey: 'API10O0X1NS8FWUTO3FXKN15ZOR09',
  //froalaActivationKey: FroalaKey
  defaultIconPack: 'fas'
});


new Vue({
  el: "#app",
  data: {
    leftPane: false,
    editable: true,
    anchor: 'contentservice.example.layout',
  }
})