Skip to content

Add quasar framework docs for generator. #836

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 11, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client-generator/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ It is able to generate apps using the following frontend stacks:
* [React with Redux](react.md)
* [React Native](react-native.md)
* [Vue.js](vuejs.md)
* [Quasar Framework](quasar.md)

Client Generator works especially well with APIs built with the [API Platform](https://api-platform.com) framework.

Expand Down
80 changes: 80 additions & 0 deletions client-generator/quasar.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
# Quasar Framework Generator

Create a Quasar Framework application using
[quasar-cli](https://quasar.dev/quasar-cli/installation):

$ quasar create my-app
$ cd my-app

$ yarn global add @api-platform/client-generator

In the app directory, generate the files for the resource you want:

$ generate-api-platform-client -g quasar https://demo.api-platform.com src/ --resource foo
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could simply be yarn dlx @api-platform/client-generator -g quasar https://demo.api-platform.com src/ --resource foo

Copy link
Contributor Author

@devel-pa devel-pa Jun 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Of course, could be nice, but I've tried to keep the same format as in Vue generator. I can modify both if you want.

Also, there are NPM users.

# Replace the URL by the entrypoint of your Hydra-enabled API
# Omit the resource flag to generate files for all resource types exposed by the API

The code is ready to be executed! Register the generated routes in `src/router/routes.js`

```javascript
import fooRoutes from '../generated/router/foo';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In a next version of the generator, you could use recast to automatically add this code (as done in the new Next.js generator). Not related to the docs PR thought.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thx, I'll keep in mind.


const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [
...fooRoutes
],

```

and store modules in the `src/store/index.js` file.

```javascript
// Replace "foo" with the name of the resource type
import foo from '../generated/store/modules/foo/';

export default function(/* { ssrContext } */) {
const Store = new Vuex.Store({
modules: {
foo,
},

```

Make sure to update the `quasar.conf.js` file with the following:

```javascript
framework: {
components: [
'QTable',
'QTh',
'QTr',
'QTd',
'QAjaxBar',
'QBreadcrumbs',
'QBreadcrumbsEl',
'QSpace',
'QInput',
'QForm',
'QSelect',
'QMarkupTable',
'QDate',
'QTime',
'QCheckbox',
'QPopupProxy'

...
],
directives: [..., 'ClosePopup'],
plugins: ['Notify'],
config: {
...
notify: {
position: 'top',
multiLine: true,
timeout: 0,
},
},
```