Skip to content

mcity/mcity-vue3-shared

Repository files navigation

Mcity-vue3-shared

Menu and toolbar used across Mcity vue3 projects.

Requirements

Reqiures:

  • Node 14
  • [Vue.js v3] - Used for our frontend.

setup

  • Create file .nrpmrc in your working directory if it doen't exist.
  • Create a github token through: https://github.com
  • run the following commands to build & serve:
    npm i
   npm run dev

Toolbar

  1. Import the McityToolbar component with import McityToolbar from '@mcity/mcity-vue3-shared/components/McityToolbar'
  2. Include the toolbar component in the template for app.vue with <mcity-toolbar><mcity-toolbar/>
  3. Pass the following required props
    • fullname
    • username
    • presentation-text
    • isUserAdmin
    • title
  4. There is a named slot available titled "buttons" when any app-specific toolbar buttons can be placed (see example below).
  5. There is another slot, "overflow-buttons" which maps to inside the ellipses menu on the far right of the toolbar.

Usage

Example:

<mcity-toolbar
  :fullname="fullname"
  :username="username"
  :presentation-text="presentationText"
  :isUserAdmin="isUserAdmin"
  title="Project Tracking"
>
  <template v-slot:buttons>
    <v-btn
      v-if="isUserAdmin"
      flat
      :to="{name: 'New'}"
      data-cy="new-project-btn">
      New Project
    </v-btn>
  </template>
</mcity-toolbar>

Project setup

# npm
npm install

Compiles and hot-reloads for development

# npm
npm run dev

Compiles and minifies for production

# npm
npm run build

Lints and fixes files

# npm
npm run lint

About

menu bar upgrade => vue3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published