DanX Vue / Quasar component library
npm install quasar-ui-danx

Compatible with Quasar UI v2 and Vue 3.
> Component and function library built on Quasar + Vue 3
``vue
name="danx"
v-model:quasar-pagination="quasarPagination"
v-model:selected-rows="selectedRows"
:columns="columns"
/>
`
`bash`
yarn create vue # Follow instructions for settings up new Vue App
yarn add quasar-ui-danx quasar
yarn add -D sass vite-svg-loader tailwindcss eslint eslint-plugin-import autoprefixer
* Disable Typescript language service
* Setup node_modules directory as a library
* Configure tsconfig.json
`json`
{
"include": [
"node_modules/quasar-ui-danx/*/"
]
}
* Configure vite.config.ts
`ts
export default ({ command }) => {
// For development w/ HMR, load the danx library + styles directly from the directory
// NOTE: These are the paths relative to the mounted quasar-ui-danx directory inside the mva docker container
const danx = (command === "serve" ? {
"quasar-ui-danx": resolve(__dirname, "../quasar-ui-danx/ui/src"),
"quasar-ui-danx-styles": resolve(__dirname, "../quasar-ui-danx/src/styles/index.scss")
} : {
// Import from quasar-ui-danx module for production
"quasar-ui-danx-styles": "quasar-ui-danx/dist/style.css"
});
return defineConfig({
resolve: {
alias: {
...danx
}
},
});
}
`
* Add node_modules as a library in PHPStorm
* Settings -> Directories -> Add
* Create a new directory w/ name node_modules and set the directory to the node_modules directory in your project
* Symlink Danx UI library
* FOR LOCAL DEVELOPMENT ONLY: if you plan on updating Danx UI
* Symlinking the danx UI library allows for better integration w/ PHPStorm + tailwindcss + HMR w/ vite.
* NOTE: Setting this up w/ npm link or trying to modify tsconfig.json / vite.config.ts only can be quite./danx-local.sh
challenging to get everything configured correctly. I found this to be the best solution.
* copy/paste and run {"scripts: {..., "postinstall": "./danx-local.sh"}}
* (recommended) Configure yarn / npm to always run this after updating packages
* Add to your package.json
* (or manually symlink node_modules/quasar-ui-danx to ../../quasar-ui-danx/ui/src)
* Directory structure of your project relative to quasar-ui-danx:
``
- parent-directory
- your-app
- tsconfig.json
- vite.config.ts
- src
- node_modules
- quasar-ui-danx -> (symlink) ../../quasar-ui-danx/ui/src
- quasar-ui-danx
- ui
- src
- tests
Initialize config files for tailwind
NOTE: vite will automatically pick up the postcss.config.js file, no need to manually configure anything
``
npx tailwindcss init -p
* Rename tailwind.config.js to tailwind.config.ts
* Setup your tailwind.config.ts:
* Make any changes to the colors object
`ts
/* @type {import('tailwindcss').Config} /
export const colors = {}
export default {
content: [],
theme: {
extend: {
colors
}
},
plugins: []
}
`
`bash`start dev in SPA mode
$ yarn dev
`bash`
$ yarn build
in the ui/dev/src/pages you can add Vue files to test your component/directive. When using yarn dev` to build the UI,
any pages in that location will automatically be picked up by dynamic routing and added to the test page.
MIT (c) Dan