├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── MainApp.vue
    │   └── NavBar.vue
    ├── App.vue
    └── main.js
├── babel.config.js
├── vue.config.js
├── .gitignore
├── jsconfig.json
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rkshaon/vue3-navbar/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rkshaon/vue3-navbar/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------
/src/components/MainApp.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <NavBar />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | import NavBar from './NavBar.vue';
10 | 
11 | export default {
12 |     name: "MainApp",
13 |     props: {},
14 |     components: { NavBar }
15 | }
16 | </script>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # navbar
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <MainApp />
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | import MainApp from './components/MainApp.vue'
 8 | 
 9 | export default {
10 |   name: 'App',
11 |   components: {
12 |     MainApp
13 |   },
14 |   mounted() {
15 |     this.$title = 'Wow'
16 |   }
17 | }
18 | </script>
19 | 
20 | <style>
21 | #app {
22 |   font-family: Avenir, Helvetica, Arial, sans-serif;
23 |   -webkit-font-smoothing: antialiased;
24 |   -moz-osx-font-smoothing: grayscale;
25 |   text-align: center;
26 |   color: #2c3e50;
27 |   margin-top: 60px;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import 'bootstrap/dist/css/bootstrap.css'
 5 | import 'bootstrap-vue/dist/bootstrap-vue.css'
 6 | import 'bootstrap/dist/js/bootstrap.js'
 7 | 
 8 | const app = createApp(App);
 9 | 
10 | app.mount('#app')
11 | 
12 | // import Vue from 'vue'
13 | // import App from './App.vue'
14 | // // import './registerServiceWorker'
15 | // // import router from './router'
16 | // // import store from './store'
17 | // import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'
18 | 
19 | // Vue.config.productionTip = false
20 | 
21 | // Vue.use(BootstrapVue)
22 | // Vue.use(IconsPlugin)
23 | 
24 | // import 'bootstrap/dist/css/bootstrap.css'
25 | // import 'bootstrap-vue/dist/bootstrap-vue.css'
26 | 
27 | // new Vue({
28 | // //   router,
29 | // //   store,
30 | //   render: h => h(App)
31 | // }).$mount('#app')


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "navbar",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^5.2.3",
12 |     "bootstrap-vue": "^2.23.1",
13 |     "core-js": "^3.8.3"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/core": "^7.12.16",
17 |     "@babel/eslint-parser": "^7.12.16",
18 |     "@vue/cli-plugin-babel": "~5.0.0",
19 |     "@vue/cli-plugin-eslint": "~5.0.0",
20 |     "@vue/cli-service": "~5.0.0",
21 |     "eslint": "^7.32.0",
22 |     "eslint-plugin-vue": "^8.0.3"
23 |   },
24 |   "eslintConfig": {
25 |     "root": true,
26 |     "env": {
27 |       "node": true
28 |     },
29 |     "extends": [
30 |       "plugin:vue/vue3-essential",
31 |       "eslint:recommended"
32 |     ],
33 |     "parserOptions": {
34 |       "parser": "@babel/eslint-parser"
35 |     },
36 |     "rules": {}
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not dead",
42 |     "not ie 11"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 3 |         <a class="navbar-brand" href="#">SomeLogo</a>
 4 |         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
 5 |             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 6 |             <span class="navbar-toggler-icon"></span>
 7 |         </button>    
 8 |         <div class="collapse navbar-collapse" id="navbarSupportedContent">
 9 |             <ul class="navbar-nav mr-auto">
10 |                 <li class="nav-item active">
11 |                     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
12 |                 </li>
13 |                 <li class="nav-item">
14 |                     <a class="nav-link" href="#">About</a>
15 |                 </li>
16 |                 <!-- <li class="nav-item dropdown">
17 |                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
18 |                         aria-haspopup="true" aria-expanded="false">
19 |                         Dropdown
20 |                     </a>
21 |                     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
22 |                         <a class="dropdown-item" href="#">Action</a>
23 |                         <a class="dropdown-item" href="#">Another action</a>
24 |                         <div class="dropdown-divider"></div>
25 |                         <a class="dropdown-item" href="#">Something else here</a>
26 |                     </div>
27 |                 </li> -->
28 |                 <li class="nav-item">
29 |                     <a class="nav-link disabled" href="#">Disabled</a>
30 |                 </li>
31 |             </ul>
32 |             <!-- <form class="form-inline my-2 my-lg-0">
33 |                 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
34 |                 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
35 |             </form> -->
36 |         </div>
37 |     </nav>
38 | </template>
39 | 
40 | <script>
41 | 
42 | export default {
43 |     name: "NavBar",
44 |     props: {},
45 |     components: {}
46 | }
47 | </script>


--------------------------------------------------------------------------------