Skip to content

Commit

Permalink
tailwind and vue dashboard practice
Browse files Browse the repository at this point in the history
  • Loading branch information
danielhamilton committed Oct 12, 2021
1 parent fd4a2fe commit a51873c
Show file tree
Hide file tree
Showing 20 changed files with 5,734 additions and 0 deletions.
5 changes: 5 additions & 0 deletions projects/data-dashboard-vite/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
3 changes: 3 additions & 0 deletions projects/data-dashboard-vite/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["johnsoncodehk.volar"]
}
11 changes: 11 additions & 0 deletions projects/data-dashboard-vite/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Vue 3 + Typescript + Vite

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.

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

## Type Support For `.vue` Imports in TS

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 `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
30 changes: 30 additions & 0 deletions projects/data-dashboard-vite/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Damn Dashboard</title>
</head>

<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<script>
const setup = () => {
return {
loading: true,
isSidebarOpen: false,
toggleSidbarMenu() {
this.isSidebarOpen = !this.isSidebarOpen
},
isSettingsPanelOpen: false,
isSearchBoxOpen: false,
}
}
</script>
</body>

</html>
Loading

0 comments on commit a51873c

Please sign in to comment.