blob: ed17c04e1c30ab887d00388a5da8a0712b606c20 (
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
|
# 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>`
Learn more about the [page container, page title and page section](/guide/components/page) components.
```vue
<template>
<b-container fluid="xl">
<page-title />
<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.
Importing `BContainer` in the [scripts block](#scripts-block) is not required as it is already registered globally.
```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>
```
|
