Menu and toolbar used across Mcity vue3 projects.
Reqiures:
- Node 14
- [Vue.js v3] - Used for our frontend.
- 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
- Import the
McityToolbar
component withimport McityToolbar from '@mcity/mcity-vue3-shared/components/McityToolbar'
- Include the toolbar component in the template for
app.vue
with<mcity-toolbar><mcity-toolbar/>
- Pass the following required props
- fullname
- username
- presentation-text
- isUserAdmin
- title
- There is a named slot available titled "buttons" when any app-specific toolbar buttons can be placed (see example below).
- There is another slot, "overflow-buttons" which maps to inside the ellipses menu on the far right of the toolbar.
<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>
# npm
npm install
# npm
npm run dev
# npm
npm run build
# npm
npm run lint