1<script setup lang="ts">
2import WelcomeItem from "./WelcomeItem.vue";
3import DocumentationIcon from "./icons/IconDocumentation.vue";
4import ToolingIcon from "./icons/IconTooling.vue";
5import EcosystemIcon from "./icons/IconEcosystem.vue";
6import CommunityIcon from "./icons/IconCommunity.vue";
7import SupportIcon from "./icons/IconSupport.vue";
8
9const openReadmeInEditor = () => fetch("/__open-in-editor?file=README.md");
10</script>
11
12<template>
13 <WelcomeItem>
14 <template #icon>
15 <DocumentationIcon />
16 </template>
17 <template #heading>Documentation</template>
18
19 Vue’s
20 <a href="https://vuejs.org/" target="_blank" rel="noopener"
21 >official documentation</a
22 >
23 provides you with all information you need to get started.
24 </WelcomeItem>
25
26 <WelcomeItem>
27 <template #icon>
28 <ToolingIcon />
29 </template>
30 <template #heading>Tooling</template>
31
32 This project is served and bundled with
33 <a
34 href="https://vite.dev/guide/features.html"
35 target="_blank"
36 rel="noopener"
37 >Vite</a
38 >. The recommended IDE setup is
39 <a href="https://code.visualstudio.com/" target="_blank" rel="noopener"
40 >VSCode</a
41 >
42 +
43 <a
44 href="https://github.com/vuejs/language-tools"
45 target="_blank"
46 rel="noopener"
47 >Vue - Official</a
48 >. If you need to test your components and web pages, check out
49 <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
50 and
51 <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
52 /
53 <a href="https://playwright.dev/" target="_blank" rel="noopener"
54 >Playwright</a
55 >.
56
57 <br />
58
59 More instructions are available in
60 <a href="javascript:void(0)" @click="openReadmeInEditor"
61 ><code>README.md</code></a
62 >.
63 </WelcomeItem>
64
65 <WelcomeItem>
66 <template #icon>
67 <EcosystemIcon />
68 </template>
69 <template #heading>Ecosystem</template>
70
71 Get official tools and libraries for your project:
72 <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
73 <a href="https://router.vuejs.org/" target="_blank" rel="noopener"
74 >Vue Router</a
75 >,
76 <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener"
77 >Vue Test Utils</a
78 >, and
79 <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener"
80 >Vue Dev Tools</a
81 >. If you need more resources, we suggest paying
82 <a
83 href="https://github.com/vuejs/awesome-vue"
84 target="_blank"
85 rel="noopener"
86 >Awesome Vue</a
87 >
88 a visit.
89 </WelcomeItem>
90
91 <WelcomeItem>
92 <template #icon>
93 <CommunityIcon />
94 </template>
95 <template #heading>Community</template>
96
97 Got stuck? Ask your question on
98 <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
99 (our official Discord server), or
100 <a
101 href="https://stackoverflow.com/questions/tagged/vue.js"
102 target="_blank"
103 rel="noopener"
104 >StackOverflow</a
105 >. You should also follow the official
106 <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener"
107 >@vuejs.org</a
108 >
109 Bluesky account or the
110 <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
111 X account for latest news in the Vue world.
112 </WelcomeItem>
113
114 <WelcomeItem>
115 <template #icon>
116 <SupportIcon />
117 </template>
118 <template #heading>Support Vue</template>
119
120 As an independent project, Vue relies on community backing for its
121 sustainability. You can help us by
122 <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener"
123 >becoming a sponsor</a
124 >.
125 </WelcomeItem>
126</template>