Create new component

Provides Building blocks(create basic files and folders required for start and develop. Also provide environment to test this component bare bone) to create a new component which will be shared among all apps.

1. Create repository on github:InComNetworking . Example is vue-component-name. Replace name with your component name. like vue-component-widget-text

2. Clone repository localy.

3. Init default component structure. You have to run this command from folder above your local folder for repository

npm create @incom/vue-component vue-component-name

Need to install the following packages:
github:InComNetworking/create-vue-component
Ok to proceed? (y)
? What is the name of the new project vue-component-name
? How would you descripe the new project  Vue component project
info Created vue-component-name/.eslintignore
info Created vue-component-name/.eslintrc.cjs
info Created vue-component-name/.gitattributes
info Created vue-component-name/.editorconfig
info Created vue-component-name/vite.config.js
info Created vue-component-name/package.json
info Created vue-component-name/index.html
info Created vue-component-name/src/index.js
info Created vue-component-name/src/App.vue
info Created vue-component-name/src/vue-component-section.html
info Created vue-component-name/src/vue-component-section.scss
info Created vue-component-name/src/main.js
info Created vue-component-name/src/vue-component-section.vue
info Moved vue-component-name/src/vue-component-section.vue -> vue-component-name/src/vue-component-name.vue
info Moved vue-component-name/src/vue-component-section.scss -> vue-component-name/src/vue-component-name.scss
info Moved vue-component-name/src/vue-component-section.html -> vue-component-name/src/vue-component-name.html
success Initialized empty Git repository
success Installed packages
success Generated into /Users/gor/incomrealestate.com/vue-component-name

4. Start your local dev server:

cd vue-component-name
npm run dev

  VITE v3.0.2  ready in 363 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

5. Your component code is in src folder with names:

vue-component-name.html
vue-component-name.scss
vue-component-name.vue

Next files is help files to develop component:

App.vue
index.js
main.js

6. New created component now can be used as a npm package in your application

• install npm package from repository npm install github:InComNetworking/vue-component-name
• import component in your code

  import VueComponentName from "#/vue-component-name/src/vue-component-name.vue";
  ...
  <template>
  ...
  <VueComponentName :text="'some text'"/>
  ...