blob: c0419acd4603114bb7f77c3d0d94c6d85a5e6d3a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
# Page Anatomy
Single-file components (SFC) consist of a `template`, `script` and `style` block.
## Template block
When creating a new page, each template consists of at least 3 components:
- `<b-container>`
- `<page-title>`
- `<page-section>`
### Page container
Use the `fluid="xl"` prop on the `<b-container>` component to render a container that is always 100% width on larger screen sizes. Importing `BContainer` in the [scripts block](#scripts-block) is not required as it is already registered globally.
[Learn more about BootstrapVue containers](https://bootstrap-vue.org/docs/components/layout#responsive-fluid-containers).
### Page title component
By including the `<page-title>` component in the template, it will automatically render the page title that corresponds with the title property set in the route record's meta field.
Optional page descriptions can be included by using the description prop `:description` prop and passing in the i18n localized text string.
### Page section component
The `<page-section>` component will render semantic HTML. By adding a `:section-title` prop to the `<page-section>` component, the localized text string will be rendered in an `h2` header element.
```vue
<template>
<b-container fluid="xl">
<page-title :description="$t('pageName.pageDescription')"/>
<page-section :section-title="$t('pageName.sectionTitle')">
// Page content goes here
</page-section>
</b-container>
</template>
```
## Scripts block
In the scripts section, be sure to import the `PageTitle` and `PageSection` components and declare them in the `components` property.
```vue
<script>
import PageTitle from '@/components/Global/PageTitle';
import PageSection from '@/components/Global/PageSection';
export default {
name: 'PageName',
components: { PageTitle, PageSection }
};
</script>
```
## Style block
Add the `scoped` attribute to the style block to keep the styles isolated to the SFC. While the `scoped` attribute is optional, it is preferred and global changes should be done in global style sheets.
```vue
<style lang="scss" scoped> </style>
```
## Complete single-file component (SFC)
The final SFC will look like this.
```vue
<template>
<b-container fluid="xl">
<page-title :description="$t('pageName.pageDescription')"/>
<page-section :section-title="$t('pageName.sectionTitle')">
// Page content goes here
</page-section>
</b-container>
</template>
<script>
import PageTitle from '@/components/Global/PageTitle';
import PageSection from '@/components/Global/PageSection';
export default {
name: 'PageName',
components: { PageTitle, PageSection }
};
</script>
<style lang="scss" scoped>
.example-class {
/* Styles go here */
}
</style>
```
|
