Builder Template (Vue + Typescript)

Usage no npm install needed!

<script type="module">
  import builderTemplate from '';


Template Builder

How to use plugin

Solution 1: Build Package (Style Not Effect and Include Store)

  1. Run Command
yarn add vue-builder-template
  1. Run Command
yarn dev


npm run dev
  1. Setup nuxt.config.js file (only nuxt.js)
    "plugins": [
        { "src": "~/plugins/<filename>", "ssr": false }
  1. Import Package to main.ts or main.js file
    import Builder from 'vue-builder-template/src/main'

    Builder // declare create
  1. Use Component
attribute value type description
id bilder string for access element
ref up to you string for access result template
data-id up to you string for create element (default: builder). Mutiple element should be setup difference name
:data-prop-template (optional) up to you string for setup default prop your template json
@click="<YOUR_FUNCTION_NAME>" (optional) up to you function for get result on function

  1. Access Result Template

Solution 2: Git Repo (Style Effect and Exclude Store)

  1. Add Dependencies in package.json
    "vue-builder-template": "git+ssh://"
  1. Run Command
yarn add vue-builder-template


npm install vue-builder-template --save
  1. Create .env file
VUE_APP_ECOM_CMS_API=<Base URL API image storage>
VUE_APP_ADMIN_USERNAME=<Username for access to image storage>
VUE_APP_ADMIN_PASSWORD=<Password for access to image storage>

VUE_APP_BASE_URL=<Base URL API image storage>
VUE_APP_TOKEN_IMAGE_STORAGE=<Token for access to image storage>
  1. Import Component in main.ts or main.js
    import Components from 'vue-builder-template/src/plugins/Index.ts'

  1. Use Component

How to Build and Publish Package (Self Reminder)

  1. Setup package.json (Change version)
  2. Setup tsconfig.json
  3. Run Command
yarn build:ts


npm run build:ts
  1. Register NPM
  2. [In Your Project Plugin] npm login and type username, password, email
  3. Run Command (Every publish must be change version in package.json)
npm publish
  • remark: [Unpublish version] Run npm unpublish <PACKAGE_NAME>@<VERSION> such as npm unpublish vue-builder-template@0.0.1
  • remark: [Deprecate version] Run npm deprecate -f <PACKAGE_NAME>@<VERSION> '<REASON>' such as npm deprecate -f vue-builder-template@0.0.1 'Have New Version'
  • remark: [Add User NPM for Delete Package] Run npm owner add npm <PACKAGE_NAME> such as npm owner add npm vue-builder-template
  • remark: [Delete Your User of Package] Run npm owner rm <USER> <PACKAGE_NAME> such as npm owner rm username vue-builder-template

Project setup

yarn install

Compiles and hot-reloads for development

yarn dev

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.