Skip to content

Commit 328b52e

Browse files
AkryumAkryum
committed
docs: improved installation docs
1 parent 9716048 commit 328b52e

14 files changed

Lines changed: 296 additions & 27 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
![screenshot](./media/screenshot-shadow.png)
44

5-
[Documentation](https://devtools.vuejs.org/)
5+
[Documentation](https://devtools.vuejs.org/) | [Install the extension](https://devtools.vuejs.org/guide/installation.html)
66

77
## Monorepo
88

‎packages/docs/postcss.config.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* eslint-disable @typescript-eslint/no-var-requires */
2+
3+
const path = require('path')
4+
5+
module.exports = {
6+
plugins: [
7+
require('autoprefixer'),
8+
require('tailwindcss')(path.resolve(__dirname, './tailwind.config.cjs')),
9+
require('postcss-nested'),
10+
],
11+
}

‎packages/docs/src/.vitepress/theme/custom.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
.nav-bar-title .logo {
6+
margin-top: 6px;
7+
}
8+
9+
.home-hero {
10+
figure {
11+
.image {
12+
max-height: 100px;
13+
}
14+
}
15+
}

‎packages/docs/src/.vitepress/theme/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import DefaultTheme from 'vitepress/theme'
2+
import './custom.css'
3+
4+
export default DefaultTheme

‎packages/docs/src/components/InstallButton.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts" setup>
2+
defineProps<{
3+
logo: string
4+
label: string
5+
href: string
6+
external?: boolean
7+
}>()
8+
</script>
9+
10+
<template>
11+
<a
12+
:href="href"
13+
:target="external ? '_blank' : undefined"
14+
class="border border-gray-100 border-solid rounded flex items-center gap-4 p-4 hover:bg-green-100 hover:border-green-200 hover:no-underline"
15+
>
16+
<img
17+
:src="logo"
18+
class="max-w-8 max-h-8"
19+
>
20+
{{ label }}
21+
</a>
22+
</template>

‎packages/docs/src/components/InstallButtons.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script lang="ts" setup>
2+
import InstallButton from './InstallButton.vue'
3+
4+
interface Button {
5+
label: string
6+
logo: string
7+
href: string
8+
external?: boolean
9+
}
10+
11+
const buttons: Button[] = [
12+
{
13+
label: 'Install on Chrome',
14+
logo: '/logo-chrome.svg',
15+
href: 'https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd',
16+
external: true,
17+
},
18+
{
19+
label: 'Install on Firefox',
20+
logo: '/logo-firefox.svg',
21+
href: 'https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/',
22+
external: true,
23+
},
24+
// {
25+
// label: 'Install on Edge',
26+
// logo: '/logo-edge.png',
27+
// href: '',
28+
// external: true,
29+
// },
30+
{
31+
label: 'Standalone app',
32+
logo: '/logo-electron.svg',
33+
href: '#standalone',
34+
},
35+
]
36+
</script>
37+
38+
<template>
39+
<div class="flex flex-col gap-2">
40+
<InstallButton
41+
v-for="(btn, index) of buttons"
42+
:key="index"
43+
v-bind="btn"
44+
/>
45+
</div>
46+
</template>

‎packages/docs/src/guide/installation.md‎

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,37 @@
1-
# Installation
1+
<script setup>
2+
import InstallButtons from '../components/InstallButtons.vue'
3+
import InstallButton from '../components/InstallButton.vue'
4+
</script>
25

3-
The Vue.js devtools allows you to inspect and debug your applications.
6+
# Installation
47

5-
::: tip
6-
If you want to install the previous version of the devtools, see [here](#legacy).
8+
::: tip Previous version
9+
If you want to install the previous version of the devtools (v5), see [here](#legacy).
710
:::
811

12+
<InstallButtons/>
13+
914
## Chrome
1015

1116
Install the extension on the Chrome Web Store:
1217

13-
[Get the Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) / ([beta channel](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg))
18+
<InstallButton
19+
label="Install on Chrome"
20+
logo="/logo-chrome.svg"
21+
href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd"
22+
external
23+
/>
24+
25+
### Beta
26+
27+
To install the beta version of the devtools, remove or disable any existing versions and install the extension from [here](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg).
28+
29+
<InstallButton
30+
label="Install Beta version on Chrome"
31+
logo="/logo-chrome.svg"
32+
href="https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg"
33+
external
34+
/>
1435

1536
### Settings
1637

@@ -30,13 +51,23 @@ If you need to use the devtools in incognito mode or when you open an HTML file
3051

3152
Install the extension on the Mozilla Addons website:
3253

33-
[Get the Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
54+
<InstallButton
55+
label="Install on Firefox"
56+
logo="/logo-firefox.svg"
57+
href="https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/"
58+
external
59+
/>
3460

3561
### Beta
3662

37-
To install or update the beta version of the devtools, go to one of repository releases and download the `xpi` file.
63+
To install or update the beta version of the devtools, remove or disable any existing versions, go to one of repository beta releases and download the `xpi` file.
3864

39-
[Repository releases](https://github.com/vuejs/vue-devtools/releases)
65+
<InstallButton
66+
label="Install Beta version from Repository"
67+
logo="/logo-firefox.svg"
68+
href="https://github.com/vuejs/vue-devtools/releases"
69+
external
70+
/>
4071

4172
### Settings
4273

@@ -137,7 +168,20 @@ If something is broken with the new devtools, please [submit a new issue](https:
137168

138169
Meanwhile, you can install the legacy version (v5) of the devtools:
139170

140-
- [Chrome](https://chrome.google.com/webstore/detail/iaajmlceplecbljialhhkmedjlpdblhp/)
141-
- [Firefox](https://github.com/vuejs/vue-devtools/releases/download/v5.3.3/vuejs_devtools-5.3.4-fx.xpi)
171+
<div class="flex flex-col gap-2">
172+
<InstallButton
173+
label="Install Legacy version on Chrome"
174+
logo="/logo-chrome.svg"
175+
href="https://chrome.google.com/webstore/detail/iaajmlceplecbljialhhkmedjlpdblhp"
176+
external
177+
/>
178+
179+
<InstallButton
180+
label="Install Legacy version on Firefox"
181+
logo="/logo-firefox.svg"
182+
href="https://github.com/vuejs/vue-devtools/releases/download/v5.3.3/vuejs_devtools-5.3.4-fx.xpi"
183+
external
184+
/>
185+
</div>
142186

143187
Make sure you disable any other versions of the Vue devtools. Only one version should be enabled at a time.

‎packages/docs/src/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ home: true
33
sidebar: false
44
heroImage: /logo.svg
55

6-
actionText: Get Started
6+
actionText: Install now
77
actionLink: /guide/installation
88

99
footer: MIT Licensed | Copyright © 2014-present Evan You, Guillaume Chau

‎packages/docs/src/public/logo-chrome.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/docs/src/public/logo-edge.png‎

141 KB
Loading

0 commit comments

Comments
 (0)