main.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
import { createApp } from 'vue'; import App from './App.vue'; import VueNavigationBar from 'vue-navigation-bar'; import 'vue-navigation-bar/dist/vue-navigation-bar.css'; const app = createApp(App); app.component('vue-navigation-bar', VueNavigationBar); // Mount the Vue app app.mount('#app'); |
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<template> <div id="app"> <vue-navigation-bar :options="navbarOptions" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'App', data() { return { navbarOptions: { elementId: 'main-navbar', isUsingVueRouter: true, brandImagePath: './assets/brand-image.png', // Assuming the file is in `public/assets` brandImageAltText: 'Brand Logo', mobileBreakpoint: 992, ariaLabelMainNav: 'Main Navigation', menuOptionsLeft: [ { type: 'link', text: 'Home', path: { name: 'home' } }, { type: 'link', text: 'About', path: { name: 'about' } }, { type: 'link', text: 'Services', path: { name: 'services' } }, ], menuOptionsRight: [ { type: 'button', text: 'Signup', path: { name: 'signup' }, class: 'signup-btn' }, { type: 'button', text: 'Login', path: { name: 'login' } }, ], }, }; }, }); </script> <style> /* Simplified styling for navigation */ #app { font-family: Arial, sans-serif; } .vnb .signup-btn { background-color: #007bff; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; } .vnb .signup-btn:hover { background-color: #0056b3; } </style> |
