Skip to content

Commit 7759d54

Browse files
committed
docs: declare that themePath/index.js is required
When you want to publish your theme as an npm package, make sure the package has `index.js`, and set `"main"` field at `package.json` to `index.js` so that VuePress can resolve and get the correct themePath.
1 parent 8b56f98 commit 7759d54

File tree

3 files changed

+30
-8
lines changed

3 files changed

+30
-8
lines changed

β€Žpackages/docs/docs/theme/README.md

+13-3
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Just one `Layout.vue` might not be enough, and you might also want to define mor
2828
So it's time to reorganize your theme, an agreed theme directory structure is as follows:
2929

3030
::: vue
31-
theme
31+
themePath
3232
β”œβ”€β”€ `global-components` _(**Optional**)_
3333
β”‚ └── xxx.vue
3434
β”œβ”€β”€ `components` _(**Optional**)_
@@ -42,7 +42,7 @@ theme
4242
β”œβ”€β”€ `templates` _(**Optional**)_
4343
β”‚ Β  β”œβ”€β”€ dev.html
4444
β”‚ Β  └── ssr.html
45-
β”œβ”€β”€ `index.js` _(**Optional**)_
45+
β”œβ”€β”€ `index.js` _(**Only required when you publish it as an npm package**)_
4646
β”œβ”€β”€ `enhanceApp.js` _(**Optional**)_
4747
└── package.json
4848
:::
@@ -56,7 +56,17 @@ theme
5656
- `theme/enhanceApp.js`: Theme level enhancements.
5757

5858
::: warning Note
59-
Considering backward compatibility, Vue components located at theme root directory will also be automatically registered as layout components. But the recommended is placing them under `layouts` directory, which looks more clearer.
59+
1. Considering backward compatibility, Vue components located at [themePath](../miscellaneous/glossary.md#theme-side) will also be automatically registered as layout components. But the recommended is placing them under `themePath/layouts` directory, which looks more clearer.
60+
2. When you want to publish your theme as an npm package, make sure the package has `index.js`, and set `"main"` field at `package.json` to `index.js` so that VuePress can resolve and get the correct [themePath](../miscellaneous/glossary.md#theme-side).
61+
62+
```json
63+
{
64+
...
65+
"main": "index.js"
66+
...
67+
}
68+
```
69+
6070
:::
6171

6272
### Layout Component

β€Žpackages/docs/docs/zh/plugin/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ sidebar: auto
44

55
# Plugins
66

7-
> To be translated soon.
7+
> Translation are welcome!
88
99
## Writing a Plugin
1010

β€Žpackages/docs/docs/zh/theme/README.md

+16-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ sidebar: auto
44

55
# Theme
66

7+
> Translation are welcome!
8+
79
::: tip
810
Theme components are subject to the same [browser API access restrictions](../guide/using-vue.md#browser-api-access-restrictions).
911
:::
@@ -28,7 +30,7 @@ Just one `Layout.vue` might not be enough, and you might also want to define mor
2830
So it's time to reorganize your theme, an agreed theme directory structure is as follows:
2931

3032
::: vue
31-
theme
33+
themePath
3234
β”œβ”€β”€ `global-components` _(**Optional**)_
3335
β”‚ └── xxx.vue
3436
β”œβ”€β”€ `components` _(**Optional**)_
@@ -42,21 +44,31 @@ theme
4244
β”œβ”€β”€ `templates` _(**Optional**)_
4345
β”‚ Β  β”œβ”€β”€ dev.html
4446
β”‚ Β  └── ssr.html
45-
β”œβ”€β”€ `index.js` _(**Optional**)_
47+
β”œβ”€β”€ `index.js` _(**Only required when you publish it as an npm package**)_
4648
β”œβ”€β”€ `enhanceApp.js` _(**Optional**)_
4749
└── package.json
4850
:::
4951

5052
- `theme/global-components`: Components under this directory will be automatically registered as global components. For details, please refer to [@vuepress/plugin-register-components](https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-register-components).
5153
- `theme/components`: Your components.
5254
- `theme/layouts`: Layout components of the theme, where `Layout.vue` is required.
53-
- `theme/styles`: Global style and palette.
55+
- `theme/styles`: Global style and palette.
5456
- `theme/templates`: Modify default template.
5557
- `theme/index.js`: Entry file of theme configuration.
5658
- `theme/enhanceApp.js`: Theme level enhancements.
5759

5860
::: warning Note
59-
Considering backward compatibility, Vue components located at theme root directory will also be automatically registered as layout components. But the recommended is placing them under `layouts` directory, which looks more clearer.
61+
1. Considering backward compatibility, Vue components located at [themePath](../miscellaneous/glossary.md#theme-side) will also be automatically registered as layout components. But the recommended is placing them under `themePath/layouts` directory, which looks more clearer.
62+
2. When you want to publish your theme as an npm package, make sure the package has `index.js`, and set `"main"` field at `package.json` to `index.js` so that VuePress can resolve and get the correct [themePath](../miscellaneous/glossary.md#theme-side).
63+
64+
```json
65+
{
66+
...
67+
"main": "index.js"
68+
...
69+
}
70+
```
71+
6072
:::
6173

6274
### Layout Component

0 commit comments

Comments
Β (0)