vue-formservice v0.1.77
Introduction
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.
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...
- Update
package.json
with your project name - Globally substitute 'formservice' with your project name with the first character in lower case.
- Globally substitute 'Formservice' with your project name with the first character in upper case.
- git mv src/lib/Formservice.js src/lib/Projectname.js
- git mv src/store/FormserviceStore.js src/store/ProjectnameStore.js
- git mv src/components/widgets/ContentFormservice.vue src/components/widgets/ContentProjectname.vue
- git mv src/components/widgets/ContentFormserviceProps.vue src/components/widgets/ContentProjectnameProps.vue
- 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:
- ContentFormservice.vue = the component displayed on the page
- ContentFormserviceProps.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.