xref: /openbmc/webui-vue/docs/guide/quickstart/page-anatomy.md (revision 7385e139b0c9efca7430458cee982e63e282f4ae)
126c8fae0SDixsie Wolmers# Page Anatomy
2*7385e139SPatrick Williams
349287562SDerick MontagueSingle-file components (SFC) consist of a `template`, `script` and `style`
449287562SDerick Montagueblock.
526c8fae0SDixsie Wolmers
626c8fae0SDixsie Wolmers## Template block
7*7385e139SPatrick Williams
826c8fae0SDixsie WolmersWhen creating a new page, each template consists of at least 3 components:
9*7385e139SPatrick Williams
1026c8fae0SDixsie Wolmers- `<b-container>`
1126c8fae0SDixsie Wolmers- `<page-title>`
1226c8fae0SDixsie Wolmers- `<page-section>`
1326c8fae0SDixsie Wolmers
14*7385e139SPatrick WilliamsLearn more about the [page title](/guide/components/page-title)and
15*7385e139SPatrick Williams[page section](/guide/components/page-section) components.
1626c8fae0SDixsie Wolmers
1726c8fae0SDixsie Wolmers```vue
1826c8fae0SDixsie Wolmers<template>
1926c8fae0SDixsie Wolmers  <b-container fluid="xl">
20e2707ef0SDixsie Wolmers    <page-title />
2126c8fae0SDixsie Wolmers    <page-section :section-title="$t('pageName.sectionTitle')">
2226c8fae0SDixsie Wolmers      // Page content goes here
2326c8fae0SDixsie Wolmers    </page-section>
2426c8fae0SDixsie Wolmers  </b-container>
2526c8fae0SDixsie Wolmers</template>
2626c8fae0SDixsie Wolmers```
27*7385e139SPatrick Williams
2826c8fae0SDixsie Wolmers## Scripts block
29*7385e139SPatrick Williams
3049287562SDerick MontagueIn the scripts section, be sure to import the `PageTitle` and `PageSection`
3149287562SDerick Montaguecomponents and declare them in the `components` property.
32e2707ef0SDixsie Wolmers
3349287562SDerick MontagueImporting `BContainer` in the [scripts block](#scripts-block) is not required as
3449287562SDerick Montagueit is already registered globally.
35e2707ef0SDixsie Wolmers
3626c8fae0SDixsie Wolmers```vue
3726c8fae0SDixsie Wolmers<script>
38*7385e139SPatrick Williamsimport PageTitle from "@/components/Global/PageTitle";
39*7385e139SPatrick Williamsimport PageSection from "@/components/Global/PageSection";
4026c8fae0SDixsie Wolmersexport default {
41*7385e139SPatrick Williams  name: "PageName",
42*7385e139SPatrick Williams  components: { PageTitle, PageSection },
4326c8fae0SDixsie Wolmers};
4426c8fae0SDixsie Wolmers</script>
4526c8fae0SDixsie Wolmers```
4626c8fae0SDixsie Wolmers
4726c8fae0SDixsie Wolmers## Style block
48*7385e139SPatrick Williams
4949287562SDerick MontagueAdd the `scoped` attribute to the style block to keep the styles isolated to the
5049287562SDerick MontagueSFC. While the `scoped` attribute is optional, it is preferred and global
5149287562SDerick Montaguechanges should be done in global style sheets.
52*7385e139SPatrick Williams
5326c8fae0SDixsie Wolmers```vue
5426c8fae0SDixsie Wolmers<style lang="scss" scoped></style>
5526c8fae0SDixsie Wolmers```
5626c8fae0SDixsie Wolmers
5726c8fae0SDixsie Wolmers## Complete single-file component (SFC)
58*7385e139SPatrick Williams
5926c8fae0SDixsie WolmersThe final SFC will look like this.
60*7385e139SPatrick Williams
6126c8fae0SDixsie Wolmers```vue
6226c8fae0SDixsie Wolmers<template>
6326c8fae0SDixsie Wolmers  <b-container fluid="xl">
6426c8fae0SDixsie Wolmers    <page-title :description="$t('pageName.pageDescription')" />
6526c8fae0SDixsie Wolmers    <page-section :section-title="$t('pageName.sectionTitle')">
6626c8fae0SDixsie Wolmers      // Page content goes here
6726c8fae0SDixsie Wolmers    </page-section>
6826c8fae0SDixsie Wolmers  </b-container>
6926c8fae0SDixsie Wolmers</template>
7026c8fae0SDixsie Wolmers<script>
71*7385e139SPatrick Williamsimport PageTitle from "@/components/Global/PageTitle";
72*7385e139SPatrick Williamsimport PageSection from "@/components/Global/PageSection";
7326c8fae0SDixsie Wolmersexport default {
74*7385e139SPatrick Williams  name: "PageName",
75*7385e139SPatrick Williams  components: { PageTitle, PageSection },
7626c8fae0SDixsie Wolmers};
7726c8fae0SDixsie Wolmers</script>
7826c8fae0SDixsie Wolmers<style lang="scss" scoped>
7926c8fae0SDixsie Wolmers.example-class {
8026c8fae0SDixsie Wolmers  /* Styles go here */
8126c8fae0SDixsie Wolmers}
8226c8fae0SDixsie Wolmers</style>
8326c8fae0SDixsie Wolmers```
84