Skip to content

Commit de19495

Browse files
hunterliu1003hunterliu1003
committed
chore: add vue3 vite example
1 parent 11919eb commit de19495

File tree

19 files changed

+408
-1
lines changed

19 files changed

+408
-1
lines changed

‎examples/vue3/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/vue3/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Vue 3 + TypeScript + Vite
2+
3+
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
8+
9+
## Type Support For `.vue` Imports in TS
10+
11+
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
12+
13+
1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
14+
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
15+
16+
You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

‎examples/vue3/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/vue3/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "vue3",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"vue": "^3.2.41",
13+
"vue-final-modal": "workspace:4.0.0-rc.0"
14+
},
15+
"devDependencies": {
16+
"@iconify/vue": "^4.0.0",
17+
"@vitejs/plugin-vue": "^3.2.0",
18+
"autoprefixer": "^10.4.13",
19+
"postcss": "^8.4.18",
20+
"tailwindcss": "^3.2.2",
21+
"typescript": "^4.6.4",
22+
"vite": "^3.2.3",
23+
"vue-tsc": "^1.0.9"
24+
}
25+
}

‎examples/vue3/postcss.config.cjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎examples/vue3/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/vue3/src/App.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { ModalsContainer } from 'vue-final-modal'
3+
import MyModalPreview from './components/MyModalPreview.vue'
4+
</script>
5+
6+
<template>
7+
<div class="h-screen flex items-center justify-center">
8+
<MyModalPreview />
9+
</div>
10+
<ModalsContainer />
11+
</template>

‎examples/vue3/src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/vue3/src/components/MyModal.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
import { Icon } from '@iconify/vue'
3+
import { VueFinalModal } from 'vue-final-modal'
4+
5+
defineProps<{
6+
title?: string
7+
}>()
8+
9+
const emit = defineEmits<{
10+
(e: 'update:modelValue', modelValue: boolean): void
11+
}>()
12+
</script>
13+
14+
<template>
15+
<VueFinalModal
16+
class="flex justify-center items-center"
17+
content-class="flex flex-col p-4 bg-white dark:bg-black rounded"
18+
@update:model-value="val => emit('update:modelValue', val)"
19+
>
20+
<div class="flex items-center h-10">
21+
<h1 v-if="title" class="text-2xl">
22+
{{ title }}
23+
</h1>
24+
<button class="ml-auto" @click="emit('update:modelValue', false)">
25+
<Icon icon="clarity:window-close-line" class="w-10 h-10" />
26+
</button>
27+
</div>
28+
<slot />
29+
</VueFinalModal>
30+
</template>

‎examples/vue3/src/components/MyModalPreview.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { markRaw } from 'vue'
3+
import { useModal } from 'vue-final-modal'
4+
import MyModal from './MyModal.vue'
5+
import VButton from './VButton.vue'
6+
7+
const { open } = useModal<InstanceType<typeof MyModal>['$props']>({
8+
component: markRaw(MyModal),
9+
attrs: {
10+
title: 'Hello World!',
11+
},
12+
slots: {
13+
default: '<p>The content of the modal</p>',
14+
},
15+
})
16+
</script>
17+
18+
<template>
19+
<VButton @click="() => open()">
20+
Open Modal
21+
</VButton>
22+
</template>

0 commit comments

Comments
 (0)