Dashboard starter template built with Vue 3 and Tailwind CSS.

  • By Robert Soriano
  • Last update: Dec 19, 2022
  • Comments: 5

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/

Demo

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

  1. Install @tailwindcss/ui:
yarn add @tailwindcss/ui
  1. 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

yarn

Compiles and hot-reloads for development

yarn dev

Compiles and minifies for production

yarn build

License & copyright

Licensed under the MIT License.

Github

https://github.com/wobsoriano/v-dashboard

Comments(5)

  • 1

    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] } } ]

    image

  • 2

    Migrate to Tailwind version 2

    Hello,

    Please find the pull request for the Version 2,

    This will cover

    1. https://github.com/wobsoriano/v-dashboard/issues/13
    2. https://github.com/wobsoriano/v-dashboard/issues/12

    Thank you for the initial work 👍 🥇 , this is very helpfull.

    Julien

  • 3

    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

  • 4

    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

  • 5

    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.

Popular Tag

Related