Add functionality from [docservice.io] to a VueJS project.
npm install vue-docservice --save
or
yarn add vue-docservice
When used with a module system, you must explicitly install Vuex via Vue.use():
import Vue from 'vue'
import Contentservice from 'vue-contentservice'
import Docservice from 'vue-docservice'
Vue.use(Contentservice, options)
Before beginning, you must have vue-contentservice already used in your project. Docservice is added to your Nuxt project in much the same way as Contentservice was added, by creating a Nuxt plugin.
~/plugins/vue-docservice.js:
import Vue from 'vue'
import Docservice from 'vue-docservice'
Vue.use(Contentservice, options)
nuxt.config.js:
module.exports = {
...
plugins: [
{ src: '~plugins/vue-contentservice.js', ssr: false },
...
{ src: '~plugins/vue-docservice.js', ssr: false },
],
}
Note: this is plugins
under module.exports
, not to be confused with any of the Webpack plugins defined inside build
.
Create a free ToolTwist account at http://tooltwist.com, and press 'Add Application' to get an APIKey for your application. This dashboard provides user administration, metrics, and other functionality.
vue-docservice requires that an options
object is passed to Vue.use().
These options relate to how your client application connects to the remote Contentservice.io server.
Some of these values may change during the different stages of your development, so the endpoint
details are best saved in a configuration file, that can be overwritten during deployment. The
convention we use is to place such a file in a directory named protected-config/websiteConfig.js
:
/*
* This file gets overwritten during production deployments.
*/
module.exports = {
docservice: {
host: 'docservice.io',
version: 'v2',
apikey: 'API10O0X1XXXXXXXXXXXKN15ZXXX9'
}
}
We then reference this file when setting our endpoints. Note that not all the values need to be defined.
// Load the configuration. This directory should be included in .gitignore.
import Config from '../protected-config/websiteConfig'
const options = {
protocol: Config.docservice.protocol,
host: Config.docservice.host,
port: Config.docservice.port,
version: Config.docservice.version,
apikey: Config.docservice.apikey,
...
}
When you edit a page, you will now see the Docservice widgets in the toolbox.