Could not be much simpler…
vue create my-project
You can then view the site in development mode:
Open your browser at http://localhost:8080.
To edit the content of the page press
control-option-escape on a Mac or
control-alt-escape on Windows.
Note that the content shown is example data. Change it as you wish, but be aware that other people will see anything you enter, and also that the content gets reset regularly without warning so your changes may disappear.
To customise the site, or edit your own content, see the ContentService documentation.
For more information about this and other prefabricated application components, see the ToolTwist website.
Assuming you have a working VueJS project (similar to one created by Vue CLI):
- Import these packages into your
import ContentService from "vue-contentservice"
- Add pages to you app that have content management
Adding ContentService to a page can be done in three steps.
Add VueJS to the page.
<!-- 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">
Initialize Content Service
Place the content editing component on your page
<content-layout-editor :editable="editable" :anchor="anchor">
In this default mode, pressing
Control-Option-Escapeon a Mac or
Control-Alt-Escape on Windows, while on the page will enter layout editing mode.
See this jsfiddle for an example or if you wish to to experiment.
Assuming you have a working Nuxt project:
Create a plugin in
import Vue from 'vue'
import Contentservice from 'vue-contentservice'
You can now add pages to your app that have content management at
To simplify deploying in different stages of development (test, UAT, staging, production) we recommend keeping the configuration external to the application. One way to do this is the place the config in a separate directory that can be overwritten by your build scripts as they deploy to different environments.
import Vue from 'vue'
A combined configuration can then go in protected-config/websiteConfig.js, something like this:
The code so far has used the APIKEY of the Content Service demonstration account. This content can be edited by anyone, and gets reset periodically.
To display edit your own content, create an account on the Tooltwist website and get your own APIKEY.
The content that is displayed on a page is specified by the ‘anchor’ attribute, that acts as a key to identify your specific content. You can use almost any value for the anchor, but we suggest you create a simple naming convention to keep things simple, for example
The examples so far have all allowed full page content management, allowing ‘widgets’ to be added to the page.
When a page is being edited, an extra pane appears on the right, containing a toolbox of widgets and allowing you to enter properties for widgets already on the page. This right pane can be resized by dragging it’s border.
In some cases you may wish to have a similar pane on the left side of the page. This can be done simply by a slot to your template.
The generated code includes classes that you may define:
|.c-triple-pane||The entire content area, including the side panes.|
|.c-editing-layout||Set when in content management mode.|
|.c-not-editing-layout||Normal mode, when not laying out the page.|
|.c-has-left-pane||Set when the left pane is being used.|
|.c-left-pane||Left pane area|
|.c-middle-pane||Use with care.|
|.c-right-pane||Use with care.|
In some cases you may wish to display managed content on your site, but want that content management to occur on the site itself. In this case you can use Remote Content Management.
With Remote Content Management (RCM) you can log in to your Tooltwist account and modify the content from there. Your changes will “magically” appear on your website.
Content management from the site itself is easy, so why would you want to do this?
a) It may be because you don’t want the site to have the ‘weight’ of the logic required to edit pages (i.e. faster load times, or lower memory usage)
b) You do not want to add login functionality to your site, or
c) You prefer the tighter security of the Tooltwist admin console, and want to make it as hard as possible for hackers.
If your application already has an administration section, or if you don’t want your users to log into a Tooltwist admin account (because they might modify the wrong thing!) then it makes sense to provide Content Management functionality in your admin website.
Content Service provides components to make this easy.
Widgets for ContentService are written such that they can operation in three modes:
- Embedded within a page layout, where the definition of the content is provides from the layout definition, which comes from the ContentService server.
- Standalone, where the component gets it’s content comes the ContentService server.
- Standalone, where the program provides the content.
In this step, we create a component that will allow the user to edit the properties of your widget, in the properties panel on the right side of the editor.
In this step we create the component that displays the actual widget. The way the widget is displayed can be varied as you wish, depending on the properties entered using your properties component.
This widget needs to be able to work in three different modes:
- normal display on a web pages
- edit mode in the editor
- design mode in the editor
You will see in the code below how these three models can be separated. In this example, the output of the widget is the same for both edit and design mode. You can split this code as required.
Note: When creating a new element, as much as possible prefix the class with c-property as to distinguish the element under the content service. Also, make sure that the style is scoped as to enclose the styles to the widget only.
Once you have the property and display widget components created, you need to register them with Contentservice using
$content.registerWidget(). The place you do this will depend upon the framework you are using.
- For a raw VueJS application you can register the widgets at the sane place you are invoking view (typically in App.js or equivalent).
- If you are packaging the widgets in a library for npm, they can be initialised in the package’s
- If you are using Nuxt the widgets can be registered in a plugin, as below.
For a Nuxt project the following code could be installed at /plugins/CustomWidgetConfig.js:
import Vue from 'vue'
The plugin needs to be included in nuxt.config.js:
Note: Be careful, The config file might also contain a plugins array for Webpack. Make sure you update the correct one.
Once you’re done following all the steps above, it’s time to test the newly created widget. Edit any page using Contentservice and you should see your widget in the Toolbox.
- ContentService.io adds CMS functionality to VueJS and Nuxt projects.
- ContentService can be extended with custom widgets, allowing you to create reusable, application-specific widgets.
- This project provides a template for creating npm packages of reusable custom widgets.
When you use this template, you will get an npm package that can be used in VueJS and Nuxt projects:
- Example widget added to the toolbox on pages that use contentservice.io.
- Example Vuex store.
- Example code calling a remote service.
- Example code to read config files.
- Example Nuxt plugin.
- Build scripts.
- A local test harness.
- Testing framework.
Clone this project, and push it to your own repo, then play at will:
git clone https://github.com/tooltwist/vue-whatever.git myProject
rm -rf .git; git init; git add .; git commit -m 'Cloned from vue-whatever'
git remote add origin <your repos URL>
git push --set-upstream origin master
Open the project in your edit and…
- Globally substitute ‘whatever’ with your project name with the first character in lower case.
- Globally substitute ‘Whatever’ with your project name with the first character in upper case.
- git mv src/lib/Whatever.js src/lib/Projectname.js
- git mv src/store/WhateverStore.js src/store/ProjectnameStore.js
- git mv src/components/widgets/ContentWhatever.vue src/components/widgets/ContentProjectname.vue
- git mv src/components/widgets/ContentWhateverProps.vue src/components/widgets/ContentProjectnameProps.vue
- Update the description in
README.mdto explain what this widget library does.
You can test your widget using:
To create new widgets, you can copy and modify the example widget files in src/components/widgets:
- ContentWhatever.vue = the component displayed on the page
- ContentWhateverProps.vue = a component to edit the properties when in editing mode.
- Register your new widget using
Commit to github, then publish at will:
Use this template to create an npm package that can be added to VueJS or Nuxt projects that utilise Contentservice.io.
For the sake of this documentation, we’ll assume your new project will be called
cd /Development/Project (or somewhere else)
rm -r .git
Sometimes the best, or only, place to develop and debug a package is as it is being within another application.
The “make change, publish to npm, pull to project” process is too slow, and risks having a broken or debug version of the package being deployed by other users of the package.
A better solution is to clone the project directly into the node_modules directory of your project and make changes there.
After each code change, rebuild the bundle.
npm run build-bundle
For many projects, this option will allow live reload of the application each time you change the code, however it will not republish the artifacts in the
rm -r node_modules
Modify package.json, and change the main entry point from:
This option however will NOT update the CSS file
vue-xxxx/dist/vue-xxxx.css. To rebuild this file you will need to run
npm install and
npm run build-bundle again.
If you run
npm-install in your project directory, it will overwrite any changes you’ve made to your package.
Do not check in
package.json if you’ve made the changes mentioned in Option 2B.
If you are using option 2B and see the error
Module build failed: TypeError: this.setDynamic is not a function then remove the node_modules directory in your vue-xxx package directory (not the main project) and restart your server.
Widgets required two Vue files:
- The widget as it is displayed on a page
- A properties entry area, where the user can enter details while editing the page.