SDK For developing 1Tool modules.
About The Project
1Tool module skeleton is a front-end setup for scaffolding 1Tool modules independently from backend. We provide this code, so anyone can build modules on top of the 1Tool suite api.
- Easy and fast setup without the hurdles of setting up a backend server.
- Your time should be focused on creating something amazing. A project that solves a problem and helps others
- You shouldn’t be doing the same tasks over and over like setting up an authorized api or state management from scratch
Of course, no template will serve all modules since your needs may be different. So we’ll be adding more in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue.
Getting started section to get started.
To get a local copy up and running follow these simple steps.
You should have an user account at 1Tool suite and be familiar with the following technologies:
- Tailwind CSS
- Vue3 ecosystem
- vue routing
- composition api
- pinia state management
- vue single file components (SFC)
- Obtain an API Key at https://my.1tool.com/suite/api
- Clone the repo
git clone https://github.com/1tool/1tool-module-skeleton.git
- Install NPM packages
- Enter your API token and tenant id in meta tags of
<meta name="tenant-id" content="API_TENANT"> <meta name="auth-token" content="API_TOKEN">
To start a development server simple run
npm run watch
Creating a new module
There is a Demo app provided in
src/apps/Demo. To get started with a new module there’s a few steps to take:
- Simply duplicate
Demofolder and give it a name of the new module; i.e.:
- Replace all occurences of
newmodulein the newly created folder.
public/index.htmlfrontend mount point.
The entry point of the application is defined in
<div id="frontend-canvas" data-module="Demo"></div>
Everything you need to worry about is in
src/apps. The rest of the code is just a setup that get’s provided by 1Tool.
src/apps/ `-- Module |-- api | `-- index.js - provides authorized api client |-- components | `-- *.vue - a place to store your vue SFC components |-- lang | `-- index.js - contains translation language lines |-- router | `-- routes.js - defines module routes and views |-- store | `-- index.js - pinia application state |-- views | `-- Module.vue - base module view `-- index.js
A list of links to documentation pages:
- 1Tool API – documentation of api endpoints
- Vue.js – vue3 documentation
- Pinia – state management documentation
- PrimeVue – component library documentation
- vue-i18n – language layer documentation
- TailwindCSS – css framework documentation
- vue-router – routing documentation
Distributed under the MIT License. See
LICENSE for more information.
Where can I obtain an api token?
You can obtain an api token with authorizing your user against the
auth/user api endpoint: Read more on api documentation.