top toolbar design

Author: kafousis

package-lock.json

@@ -9,6 +9,7 @@
  },
  "dependencies": {
  "core-js": "^3.8.3",
+ "primeflex": "^3.2.1",
  "primeicons": "^5.0.0",
  "primevue": "^3.15.0",
  "vue": "^3.2.13",
@@ -38,7 +39,9 @@
  "parserOptions": {
  "parser": "@babel/eslint-parser"
  },
- "rules": {}
+ "rules": {
+ "vue/multi-word-component-names": "off"
+ }
  },
  "browserslist": [
  "> 1%",

package.json

@@ -1,30 +1,15 @@
 <template>
- <nav>
- <router-link to="/">Home</router-link> |
- <router-link to="/about">About</router-link>
- </nav>
- <router-view/>
+ <div id="app">
+ <Header />
+ <router-view />
+ </div>
 </template>
 
-<style>
-#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
-}
+<script>
+import Header from "./components/header.vue";
 
-nav {
- padding: 30px;
-}
-
-nav a {
- font-weight: bold;
- color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
- color: #42b983;
-}
-</style>
+export default {
+ name: "App",
+ components: { Header },
+};
+</script>

src/App.vue

@@ -0,0 +1,23 @@
+<template>
+ <Toolbar>
+ <template #start>
+ <img alt="Logo" src="../assets/logo.png" width="40" height="40" />
+ <h1 class="text-primary text-2xl font-bold ml-5">SPRING - VUEJS CRUD</h1>
+ </template>
+
+ <template #end>
+ <Button
+ icon="pi pi-info"
+ class="p-button-rounded p-button-outlined mr-4"
+ />
+ <Button
+ icon="pi pi-github"
+ class="p-button-rounded p-button-outlined mr-4"
+ />
+ <Button
+ icon="pi pi-linkedin"
+ class="p-button-rounded p-button-outlined mr-4"
+ />
+ </template>
+ </Toolbar>
+</template>

src/components/HelloWorld.vue

@@ -1,13 +1,30 @@
+// https://www.primefaces.org/primevue/setup
+
+import 'primevue/resources/themes/saga-blue/theme.css' //theme
+import 'primevue/resources/primevue.min.css' //core css
+import 'primeicons/primeicons.css' //icons
+import 'primeflex/primeflex.css'; // primeflex
+
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+
 import PrimeVue from 'primevue/config';
+import Toolbar from 'primevue/toolbar';
+import Button from 'primevue/button';
 
 const app = createApp(App);
 
 app.use(router);
 app.use(store);
-app.use(PrimeVue)
+
+// ripple is an optional animation for the supported components
+// Outlined & Filled Input Styles, add {inputStyle: 'filled'}
+app.use(PrimeVue, { ripple: true })
+
+app.component('Toolbar', Toolbar);
+app.component('Button', Button);
+
 
 app.mount('#app');