оптимизировал импорт bs5

student-perfomance-frontend/bun.lock

@@ -5,6 +5,7 @@
       "name": "nuxt-app",
       "dependencies": {
         "@nuxt/eslint": "1.4.0",
+        "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.6",
         "eslint": "^9.27.0",
         "nuxt": "^3.17.3",

student-perfomance-frontend/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div/>
+  <div />
 </template>
 
 <script lang="ts" setup>

student-perfomance-frontend/components/AppHeader.vue

@@ -1,5 +1,70 @@
 <template>
-  <div/>
+  <nav
+    class="navbar navbar-expand-sm navbar-light bg-light"
+  >
+    <div class="container">
+      <a class="navbar-brand" href="#">Navbar</a>
+      <button
+        class="navbar-toggler d-lg-none"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#collapsibleNavId"
+        aria-controls="collapsibleNavId"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"/>
+      </button>
+      <div id="collapsibleNavId" class="collapse navbar-collapse">
+        <ul class="navbar-nav me-auto mt-2 mt-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" href="#" aria-current="page"
+              >Home
+              <span class="visually-hidden">(current)</span></a
+            >
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a
+              id="dropdownId"
+              class="nav-link dropdown-toggle"
+              href="#"
+              data-bs-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+              >Dropdown</a
+            >
+            <div
+              class="dropdown-menu"
+              aria-labelledby="dropdownId"
+            >
+              <a class="dropdown-item" href="#"
+                >Action 1</a
+              >
+              <a class="dropdown-item" href="#"
+                >Action 2</a
+              >
+            </div>
+          </li>
+        </ul>
+        <form class="d-flex my-2 my-lg-0">
+          <input
+            class="form-control me-sm-2"
+            type="text"
+            placeholder="Search"
+          >
+          <button
+            class="btn btn-outline-success my-2 my-sm-0"
+            type="submit"
+          >
+            Search
+          </button>
+        </form>
+      </div>
+    </div>
+  </nav>
 </template>
 
 <script lang="ts" setup>

student-perfomance-frontend/nuxt.config.ts

@@ -2,8 +2,11 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-05-15',
   devtools: { enabled: true },
+
   modules: ['@nuxt/eslint'],
 
+  plugins: ['~/plugins/bootstrap.client.ts'],
+
   css: [
     '~/assets/scss/main.scss',
   ],
@@ -13,6 +16,7 @@ export default defineNuxtConfig({
       preprocessorOptions: {
         scss: {
           silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import'],
+          additionalData: '@use "~/assets/scss/_variables.scss" as *;',
         },
       },
     },

student-perfomance-frontend/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@nuxt/eslint": "1.4.0",
+    "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.6",
     "eslint": "^9.27.0",
     "nuxt": "^3.17.3",

student-perfomance-frontend/plugins/bootstrap.client.ts

@@ -1,5 +1,3 @@
-import bootstrap from 'bootstrap'
+import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(() => {})
-  nuxtApp.provide('bs', bootstrap)
-})