quasarframework / quasar-starter-kit-ui

Quasar Framework UI Template

DEPRECATED

DEPRECATED in favor of https://github.com/quasarframework/quasar/tree/dev/create-quasar

Quasar Framework UI Template

Starter Kit for building a UI component. Compatible with Quasar UI v2 and Vue 3.

Usage

First, make sure you have Node >= 8 and NPM >= 5.

# install Quasar CLI:
$ npm install -g @quasar/cli

# generate a project folder
$ quasar create <folder_name> --kit ui

Quasar Framework

Build responsive Single Page Apps, SSR Apps, PWAs, Hybrid Mobile Apps and Electron Apps, all using the same codebase!, powered with Vue.

Supporting Quasar

Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.

Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.

Documentation

Head on to the Quasar Framework official website: https://quasar.dev

Community Forum

Head on to the official community forum: https://forum.quasar.dev

Contributing

I'm excited if you want to contribute to Quasar under any form (report bugs, write a plugin, fix an issue, write a new feature).

Issue Reporting Guidelines

Please use the appropriate Github repo to report issues. See "Related Components" above. For example, a bug related to CLI should be reported to the CLI repo, one related to build issues to Quasar Framework Templates repo and so on.

• The issue list of the repository is exclusively for bug reports and feature requests. For anything else please use the Community Forum.

• Try to search for your issue, it may have already been fixed in the development branch or it may have a resolution.

• Check if the issue is reproducible with the latest stable version of Quasar. If you are using a pre-release, please indicate the specific version you are using.

• It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.

• If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.

License

Copyright (c) 2016-present Razvan Stoenescu

MIT License

quasar-starter-kit-ui's Issues

Helper functions in TypeScript

I'm currently writing a bunch of Quasar UI components via regular Vue files.

I use functions from a separate helpers folder, which importing into my Vue components.

The helper files are all plain JavaScript files.

I would like to write these helper files in TypeScript. Is this possible?

Log notice when bumping version.

@hawkeye64 Maybe you could add a small console.log to script.app-ext.js
noticing the dev that the version was bumped in app-extension as well.

/dev folder doesn't have quasar.variables.sass

dev folder outside of ui folder?

So I'm wondering if it's not better to have the dev folder outside of the ui folder.

I think there's a little bit more clarity with this structure:

/app-extenions
/ui
/dev

since each folder has its own package.json file.

Or is there a special reason the dev folder is placed inside the ui folder?

How can i add axios default header in Quasar ^2.0.0

in Quasar.config
plugins: [
'Cookies'
]
Now how can I add this default header in SSR mode?

setup ESLint on `ui/src` folder

I'd love to be able to use ESLint for the actual component I'm writing in the ui/src folder.

I have yet to try and set it up, but once I do, I can try to PR the docs so it's enabled by default.

Do not minify by default

What is the reason that the built files in ui/dist are minified by default?

I believe that the built files index.esm.js and index.common.js are always imported into quasar projects via npm, and thus included in a vue or quasar project which minifies the end result with webpack or rollup.

Therefore I believe it's better to have them not minified by default.

This is especially true if you want to step through code of UI components when importing them in another project. Stepping through minified JS is near impossible.

add license file?

Not sure if it's that important, but maybe the kit can also generate the default MIT license file of Github?
eg.

MIT License

Copyright (c) 2019 {{ author }}

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Cannot execute formatDate util

Hi,
I know it says:

Do not use, do not ask...

However, the kit is so good it got me so excited I couldn't help myself to start writing my long due app extension with this kit!

formatDate util

I try to execute the following inside a vue file component from the ui/src folder (which I load into the dev quasar project)

import { date } from 'quasar'
const { formatDate } = date
formatDate(new Date(), 'YYYY/MM/DD')

but it gives an error:

I think that perhaps it's not properly retrieving all the required dependencies when importing date.

Should mark package.json dependencies as external by default

I'm just thinking that for the es and cjs builds, it should mark all package.json dependencies as external by default:

const pkg = require('../package.json')
const external = Object.keys(pkg.dependencies || [])

Not doing so will include all dependencies as part of the resulting built files. This gives webpack of developers who import your package a harder time eliminating duplicate dependencies.

Please note that passing them as "external" in rollup, they don't need to be added as peer dependency. They will be installed automatically when a dev does npm i or yarn add on your package.

How to use peer dependency in UI component?

I have 2 Quasar UI components: easy-tables and easy-forms.
Easy Tables uses Easy Forms as dependency as well.

I want to make sure that these always stay the same version:

• Easy Forms as dependency of Easy Tables
• Easy Forms installed directly

Therefore I had listed Easy Forms as a peer dependency of Easy Tables.

However, it seems that the UI build scripts & bundlers still include the full code for Easy Forms, therefore creating the situation where Easy Forms can be a higher version when installed directly than the one installed as dependency of Easy Tables.
(this actually happened to me)

How can I make sure that the build script of my UI components won't include peer Dependencies in its bundles?

Dialog.create is not a function

I'm havinig a similar problem then last time (#3 )
but this time with Dialog.

I do

import { Dialog } from 'quasar'

but I get these errors:

Make compatible with regular vue files

My component plugin works perfectly in the dev server, but when doing npm run build it seems to still have trouble with vue files.