wobsoriano / v-dashboard Goto Github PK

View Code? Open in Web Editor NEW

909.0 909.0 204.0 167 KB

Dashboard starter template built with Vue 3 and Tailwind CSS.

Home Page: https://v-dashboard.vercel.app/

License: MIT License

HTML 0.59% JavaScript 0.98% Vue 91.85% CSS 0.53% TypeScript 6.04%

hacktoberfest tailwindcss vite vue

v-dashboard's Introduction

V-Dashboard

Dashboard starter template built with Vite, Vue 3, Tailwind CSS and TypeScript.

Copied from https://github.com/tailwindcomponents/dashboard and converted to Vue.

Demo

https://v-dashboard.vercel.app/

Note if you have access to Tailwind UI, you can follow the following steps to add it:

Install @tailwindcss/ui:

pnpm add @tailwindcss/ui

Add the plugin in tailwind.config.js without changing anything else:

// tailwind.config.js
module.exports = {
  // ...
  // rest of the config
  plugins: [require('@tailwindcss/ui')],
}

Project setup

pnpm install

Compiles and hot-reloads for development

pnpm dev

Compiles and minifies for production

pnpm build

License & copyright

Licensed under the MIT License.

v-dashboard's People

Contributors

Stargazers

Watchers

Forkers

whalemagnet lovethebomb fisthu j574144 anglesen1120 daongoc315 cbforks olitaylor syedpeer leonel1524 lzx411559669 sldev2 colodenn trendingtechnology hijizaly obucl cabutia tahseenzahra shaci julioalfian agherasachin trychenhai mxdxlx haryanapnx kansoft luceinrock citrullin fosterbryant mikejhnstn bipolarmorgan mmllski gxkai willykurniawan01 mikekaranja midujr saier trungvudang naime-hossain teddahlqvist93 domsen123 vinhais tailwxnd tang-junjie kamilz plutuss arnoldqym p-boaz nuibits okarifrankline tisks korvinszanto kharolynnh stefcab shakirullah7892 htmlcssdirectory estercalveras niomictomi sirsavio tudorels brownyin365 moon-hai tomztomz mmc7rr pradhan-p lukkyjoe dzineer athena0017 tandv592082 yenszen aurelionsulll motchju sayron97 kruppy limweb matiasfare curlybraces djatikusuma tbinkasem irfand0ank chriswerstiuk uwascan prikr vikashpisces irfnrdh damilolaalao cfrteam6 n4j1br4ch1d fcontrerasz i-mozz nydusz zhengdeding ahmedhelalahmed wang050116 moodsyklm jimmycyrdg dev-ehiabhi 0xmzz imptrjhn 1foru howard0401

v-dashboard's Issues

Do you have a version which dont use typescript?

Can we have a version that dont use typescript, even if it can have one empty page aslong as the sidebar and user menu works

Thank you

Hi, I'm opening this issue only to thank you for this project!
I'm always looking for a TailwindCSS Dashboard and I'm in love with this project!

Thank you so much! <3

Sidebar shouldn't be clickable when modal is open

When you open a modal, the sidebar is still clickable; hence letting you navigate away without closing the modal.

Update custom forms

Remove https://github.com/tailwindlabs/tailwindcss-custom-forms and use https://github.com/tailwindlabs/tailwindcss-forms for Tailwind 2 instead.

Update Tailwind to version 2

As the title says, need to update this one with the latest version of Tailwind.

https://tailwindcss.com/docs/upgrading-to-v2

Vite uses PostCSS 7 and Tailwind 2 requires 8+, so we will have to use the PostCSS 7 compatibility build of Tailwind 2.

Error occurs "[vite] error applying css transforms:" message.

Windows 10
yarn 1.22.4
node v12.16.1

$> yarn dev
PS D:\project\v-dashboard> yarn dev
yarn run v1.22.4
$ vite

Dev server running at:

Network: http://192.168.0.8:3000/
Network: http://192.168.56.1:3000/
Local: http://localhost:3000/

[vite] error applying css transforms:
TypeError: value.charCodeAt is not a function
at D:\project\v-dashboard\node_modules\tailwindcss\components.css:1:1
at module.exports (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\parse.js:17:20)
at new ValueParser (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\index.js:7:18)
at ValueParser (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\index.js:10:10)
at transformValue (D:\project\v-dashboard\node_modules\postcss-functions\dist\lib\transformer.js:20:55)
at D:\project\v-dashboard\node_modules\postcss-functions\dist\lib\transformer.js:72:24
at D:\project\v-dashboard\node_modules\postcss-functions\dist\index.js:45:18
at D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:74:18
at Rule.each (D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:60:16)
at Rule.walk (D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:71:17)
at D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:79:24 {
postcssNode: Declaration {
raws: {},
type: 'decl',
prop: 'font-size',
value: { lineHeight: '1.5rem' },
parent: Rule {
raws: [Object],
type: 'rule',
nodes: [Array],
selector: '.form-input',
lastEach: 7,
indexes: [Object],
parent: [AtRule],
source: [Object]
},
source: { start: [Object], input: [Input], end: [Object] }
}
} 0 [
TypeError: value.charCodeAt is not a function
at D:\project\v-dashboard\node_modules\tailwindcss\components.css:1:1
at module.exports (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\parse.js:17:20)
at new ValueParser (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\index.js:7:18)
at ValueParser (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\index.js:10:10)
at transformValue (D:\project\v-dashboard\node_modules\postcss-functions\dist\lib\transformer.js:20:55)
at D:\project\v-dashboard\node_modules\postcss-functions\dist\lib\transformer.js:72:24
at D:\project\v-dashboard\node_modules\postcss-functions\dist\index.js:45:18
at D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:74:18
at Rule.each (D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:60:16)
at Rule.walk (D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:71:17)
at D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:79:24 {
postcssNode: Declaration {
raws: {},
type: 'decl',
prop: 'font-size',
value: [Object],
parent: [Rule],
source: [Object]
}
}
]

Thanks.

using require

How can I use require statement in typescript ?

I'm trying to use something like this const Store = require('some').Some , but I can't see anything on browser, app doesn't start because error require is not defined

How to add 3rd Party Packages?

Hello wobsoriano,

It seems like I can't add any 3rd Party Packages to your Dashboard.