Introduction

1. ContentService.io adds CMS functionality to VueJS and Nuxt projects.

2. ContentService can be extended with custom widgets, allowing you to create reusable, application-specific widgets.

3. This project provides a template for creating npm packages of reusable custom widgets.

What you get

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.

Getting Started

Clone this project, and push it to your own repo, then play at will:

git clone https://github.com/tooltwist/vue-formservice.git myProject
cd myProject
rm -rf .git; git init; git add .; git commit -m 'Cloned from vue-formservice'
git remote add origin <your repos URL>
git push --set-upstream origin master

Open the project in your edit and...

1. Update package.json with your project name
2. Globally substitute 'formservice' with your project name with the first character in lower case.
3. Globally substitute 'Formservice' with your project name with the first character in upper case.
4. git mv src/lib/Formservice.js src/lib/Projectname.js
5. git mv src/store/FormserviceStore.js src/store/ProjectnameStore.js
6. git mv src/components/widgets/FixedPositionForm.vue src/components/widgets/ContentProjectname.vue
7. git mv src/components/widgets/FixedPositionFormProps.vue src/components/widgets/ContentProjectnameProps.vue
8. Modify README.md to explain what this widget library does.

Commit to github, then publish at will:

yarn install
yarn build-bundle
yarn patch-release

To create new widgets, you can copy and modify the example widget files in src/components/widgets:

• FixedPositionForm.vue = the component displayed on the page
• FixedPositionFormProps.vue = a component to edit the properties when in editing mode.

You can register your new widget using $content.registerWidget inside src/components/index.js.

See the wiki for a full description of how to use this template.