After utilizing Vue.js single file components to construct a website and appreciating the modular approach, I've encountered an issue. The browser appears to be requesting multiple versions of resources instead of just one URL for each.
HeaderBar.vue
<template>
<div id="header" :class="{sticky: isSticking }">
<img id="header-logo" src="../assets/logo/logo_horiz.svg">
<div id="header-menubox">
<a class="social-link" href="[scrubbed]" target="_blank">
<img src="../assets/social/facebook_blue.svg">
</a>
<a class="img-link" href="[scrubbed]" target="_blank">
<img src="../assets/social/twitter_blue.svg">
</a>
<a class="img-link" href="[scrubbed]" target="_blank">
<img src="../assets/social/insta_blue.svg">
</a>
<a class="img-link" href="[scrubbed]" target="_blank">
<img src="../assets/social/yelp_blue.svg">
</a>
<button id="header-mymenu-button" @click="toggleMenu">
<img src="../assets/button/menu.svg">
</button>
</div>
</div>
</template>
<script>
export default {
name: 'HeaderBar'
}
</script>
<style scoped>
#header {
position: sticky;
width: 100%;
padding: 1em;
background-color: rgba(255, 255, 255, 0.9);
z-index: 100;
display: grid;
grid-template-areas: "logo . menu";
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: 1fr 1fr;
}
#header.sticky {
background-color: #fff;
box-shadow: 0 1em 2.5em rgba(0, 0, 0, 0.2);
}
#header-logo {
grid-area: logo;
}
#header-menubox {
grid-area: menu;
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
}
#header-mymenu-button {
background-color: unset;
display: block;
cursor: pointer;
border: 0;
grid-column: 3 / 4;
grid-row: 2;
}
</style>
App.vue
<template>
<div id="app">
<HeaderBar></HeaderBar>
</div>
</template>
<script>
import HeaderBar from './components/HeaderBar.vue'
export default {
name: 'myapp',
components: {
HeaderBar
}
}
</script>
<style>
#app {
width: 100%;
}
</style>
vue.config.js
module.exports = {
publicPath: '/'
}
Chrome Developer Console https://i.stack.imgur.com/phAPf.png
What could be causing this behavior?
[EDIT]
I made changes to the HeaderBar.vue file to import the images:
<template>
<div id="header" :class="{sticky: isSticking }">
<img id="header-logo" :src="logoImg">
<div id="header-menubox">
<a class="social-link" href="[scrubbed]" target="_blank">
<img :src="fbImg">
</a>
<a class="img-link" href="[scrubbed]" target="_blank">
<img :src="twitImg">
</a>
<a class="img-link" href="[scrubbed]" target="_blank">
<img :src="instaImg">
</a>
<a class="img-link" href="[scrubbed]" target="_blank">
<img :src="yelpImg">
</a>
<button id="header-menu-button" @click="toggleMenu">
<img :src="menuImg">
</button>
</div>
</div>
</template>
<script>
import logoImg from "../assets/logo/logo_horiz.svg"
import fbImg from "../assets/social/facebook_blue.svg"
import twitImg from "../assets/social/twitter_blue.svg"
import instaImg from "../assets/social/insta_blue.svg"
import yelpImg from "../assets/social/yelp_blue.svg"
import menuImg from "../assets/button/menu.svg"
export default {
name: 'MyHeaderBar',
data: function() {
return {
logoImg: logoImg,
fbImg: fbImg,
twitImg: twitImg,
instaImg: instaImg,
yelpImg: yelpImg,
menuImg: menuImg
}
}
}
</script>
<style scoped>
#header {
position: sticky;
width: 100%;
padding: 1em;
background-color: rgba(255, 255, 255, 0.9);
z-index: 100;
display: grid;
grid-template-areas: "logo . menu";
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: 1fr 1fr;
}
#header.sticky {
background-color: #fff;
box-shadow: 0 1em 2.5em rgba(0, 0, 0, 0.2);
}
#header-logo {
grid-area: logo;
}
#header-menubox {
grid-area: menu;
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
}
#header-menu-button {
background-color: unset;
display: block;
cursor: pointer;
border: 0;
grid-column: 3 / 4;
grid-row: 2;
}
</style>
Following the modifications, there are fewer errors, yet the requested URLs still appear odd: https://i.stack.imgur.com/i9YIu.png