Local assets

spraddles · Apr 27, 2021 · f712189 · f712189
1 parent 34f696e
commit f712189
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 4 deletions.
diff --git a/assets/fonts/stacylia.otf b/assets/fonts/stacylia.otf
diff --git a/assets/images/book.png b/assets/images/book.png
diff --git a/components/navbar.vue b/components/navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <b-navbar toggleable="lg" type="light" variant="">
-      <b-navbar-brand href="#">
+      <b-navbar-brand href="/">
         <img src="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
       </b-navbar-brand>
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
@@ -12,6 +12,7 @@
           <NuxtLink to="/local-head">Local_head</NuxtLink>
           <NuxtLink to="/parent">Parent_child</NuxtLink>
           <a href="/page-that-doesnt-exist">Redirect</a>
+          <NuxtLink to="/local-assets">Local_assets</NuxtLink>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
@@ -22,7 +23,7 @@
   export default {}
 </script>
 
-<style>
+<style scoped>
   .navbar { 
     background-color:#e9ecef; 
     margin-bottom: 20px;

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -49,14 +49,14 @@ export default {
 
   // from 'redirect-module': https://www.npmjs.com/package/@nuxtjs/redirect-module
   redirect: [
-    // Redirect options here
+    // Redirect options here (only server side! not static)
     { from: '^/page-that-doesnt-exist', to: '/secret-page', statusCode: 301 }
   ],
 
   // Middleware: https://nuxtjs.org/docs/2.x/components-glossary/pages-middleware
   // 2 types of middleware: serverMiddleware + middleware (client side)
   router: [
-    //middleware: 'custom-redirect'
+    // middleware: 'custom-redirect'
   ],
 
   serverMiddleware: [

diff --git a/pages/local-assets.vue b/pages/local-assets.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="container">
+    <Navbar />
+    Here are some Local assets:<br><br><br>
+
+    Font:<br>
+    Here is a <span class="custom-font">cool font</span><br><br><br>
+
+    Image:<br>
+    <img src="~/assets/images/book.png" />
+
+  </div>
+</template>
+
+<script>
+  export default {}
+</script>
+
+
+
+<style scoped>
+  img {
+    width: 200px;
+  }
+  @font-face {
+    font-family: 'stacylia';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('~assets/fonts/stacylia.otf') format('truetype');
+  }
+  .custom-font {
+    font-family: stacylia;
+    font-size: 55px;
+  }
+</style>