Users Guide

Users Guide

1. install

npm install vuetify-nav 

# or

yarn add vuetify-nav

2. basic usage

At your App.vue file, follow the steps below:

1. Import vuetify-nav
   Import it with appropriate name like Navbar.

2. Export component
   Export it as the name imported.

3. Prepare "links" as an array of icon, text, and route sets.
   The array "links" will be seed of the creating navigation drawer and dropdown menu. The element of links is the object with following members:

• icon: material icon name for the list.
• text: text string of the list.
• route: path to link

4. Use component with "titleStr" and "links" property
   Set links mentioned above as "links" prop. The "titleStr" prop will be used as toolbar title.

refer to the code below:

<template>

  <v-app>

    <!-- 4. use component with "titleStr" and "links" property -->
    <Navbar titleStr="Demo App" :links="links" />

  </v-app>

</template>

<script>
// 1. import vuetify-nav
import {Navbar} from 'vuetify-nav'

export default {

  // 2. export component
  components: { Navbar},

  data: () => ({

    // 3. prepare "links" as an array of icon, text, and route sets.
    links: [
      { icon: 'home', text: 'Home', route: '/'},
      { icon: 'face', text: 'Account', route: '/account'},
      { icon: 'shop', text: 'Purchase', route: '/purchase'},
    ]
  }),
};
</script>

3. Import the account setting menu of vue-faui-user-fe

You can merge the account setting menu of vue-faui-user-fe just following steps on your App.vue file.

1. import AccountRoutes from 'vue-faui-user-fe'.
2. Add AccountRoutes.menuItem in the links array.

sample App.vue

sample App.vue

<template>
  <v-app>
    <Navbar titleStr="Demo App" :links="links">
    </Navbar>
    <Login ref="login"/>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import {AccountRoutes, PurchaseRoutes, Login} from 'vue-faui-user-fe'
import {Navbar} from 'vuetify-nav'
//import Login from '@/components/Login'
export default {
  name: 'App',
  components: { Navbar, Login },
  data: () => ({
        links: [
      { icon: 'home', text: 'Home', route: '/'},
      AccountRoutes.menuItem,
    ]
  }),
  created(){
    AccountRoutes.init()
  }
};
</script>

For more detail refer to the vue-faui-user-fe document.

4. Custome toolbar

Instead of basic toolbar mentioned above, you can make your custom toolbar with title slot and menu slot. You can path your defined </v-toolbar-title> to title slot. For menu slot, you can path multiple combinations of the following elements:

• <v-menu>
• <v-btn>
• <v-spacer>

Refer following sample Implementation.

<template>
  <v-app>
    <Navbar>
      <template v-slot:title>
        <v-toolbar-title class="grey--text">
          <span class="font-weight-light">Sample</span>
          <span>App</span>
        </v-toolbar-title> 
      </template>
      <template v-slot:menu>
        <v-spacer></v-spacer>
        <v-menu offset-y>
          <template v-slot:activator="{ on }">
          <v-btn text v-on="on">
            <v-icon left>expand_more</v-icon>
            <span>Menu</span>
          </v-btn>
          </template>
          <v-list>
            <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
              <v-list-item-title>{{ link.text }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
        <v-btn text>
          <span>Sign Out</span>
          <v-icon right>exit_to_app</v-icon>
        </v-btn>
      </template>
    </Navbar>
    <Login/>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: { Navbar},
  data: () => ({
    links: [
      { icon: 'home', text: 'Home', route: '/'},
      { icon: 'face', text: 'Account', route: '/account'},
      { icon: 'shop', text: 'Purchase', route: '/purchase'},
    ]
  })
};
</script>

.5 using material Icon

To use material Icon, you need to add google Material+Icons fonts link on your index.html file on the public folder as follows.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>