I am working on creating a layout using Vuejs and flexbox that includes elements like 'header, sidebar, main-content, sidebar, footer'.
I have separated each part of the layout into individual .vue files, such as header.vue and sidebar.vue.
In my App.vue file, I am including these components like this:
<template>
<div id="app">
<app-header ></app-header>
<app-sidebar></app-sidebar>
<app-content></app-content>
<app-sidebar></app-sidebar>
<app-footer></app-footer>
</div>
</template>
<script>
import header from "./components/header";
import sidebar from "./components/sidebar";
import content from "./components/content";
import footer from "./components/footer";
export default {
components: {
"app-header": header,
"app-sidebar": sidebar,
"app-content": content,
"app-footer": footer
}
};
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
}
#app {
border: 3px solid red;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
> * {
border: 1px solid black;
}
}
I'm facing an issue where I can't select these custom nested components directly from the App.vue file to style them. For example, I am unable to use app-header{} as I would with regular HTML tags in CSS within the style tags of the App.vue file. Is there a solution to this problem?
NOTE: I am aware that I can assign classes to each nested component and then style them using CSS class selectors.