Skip to content

Commit

Permalink
feat(docs): examples for dynamical import Quasar language packs or ic…
Browse files Browse the repository at this point in the history 
…on sets with q/app-vite
  • Loading branch information
@rstoenescu
rstoenescu committed Apr 7, 2022
1 parent d21bb0a commit e532388
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 45 deletions.
74 changes: 64 additions & 10 deletions docs/src/pages/options/quasar-icon-sets.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,34 @@ app.use(Quasar, {
Quasar CLI: If your desired Quasar Icon Set must be dynamically selected (example: depends on a cookie), then you need to create a boot file: `$ quasar new boot quasar-icon-set [--format ts]`. This will create `/src/boot/quasar-icon-set.js` file. Edit it to:

```js
// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/icon-set/(mdi-v6|fontawesome-v6).mjs')

export default async () => {
const iconSetName = 'mdi-v6' // ... some logic to determine it (use Cookies Plugin?)

try {
iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.mjs` ]().then(lang => {
Quasar.iconSet.set(setDefinition.default)
})
}
catch (err) {
// Requested Quasar Icon Set does not exist,
// let's not break the app, so catching error
}
}
```

```js
// -- With @quasar/app-webpack --

import { Quasar } from 'quasar'

export default async () => {
Expand All @@ -115,10 +143,9 @@ export default async () => {
await import(
/* webpackInclude: /(mdi-v6|fontawesome-v6)\.js$/ */
'quasar/icon-set/' + iconSetName
)
.then(setDefinition => {
Quasar.iconSet.set(setDefinition.default)
})
).then(setDefinition => {
Quasar.iconSet.set(setDefinition.default)
})
}
catch (err) {
// Requested Quasar Icon Set does not exist,
Expand All @@ -143,6 +170,35 @@ Notice the use of the [Webpack magic comment](https://webpack.js.org/api/module-
When dealing with SSR, we can't use singleton objects because that would pollute sessions. As a result, as opposed to the dynamical example above (read it first!), you must also specify the `ssrContext` from your boot file:

```js
// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/icon-set/(mdi-v6|fontawesome-v6).mjs')

// ! NOTICE ssrContext param:
export default async ({ ssrContext }) => {
const iconSetName = 'mdi-v6' // ... some logic to determine it (use Cookies Plugin?)

try {
iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.mjs` ]().then(lang => {
Quasar.iconSet.set(setDefinition.default, ssrContext)
})
}
catch (err) {
// Requested Quasar Icon Set does not exist,
// let's not break the app, so catching error
}
}
```

```js
// -- With @quasar/app-webpack --

import { Quasar } from 'quasar'

// ! NOTICE ssrContext param:
Expand All @@ -151,13 +207,11 @@ export default async ({ ssrContext }) => {

try {
await import(
/* webpackInclude: /(mdi-v6|fontawesome-v5)\.js$/ */
/* webpackInclude: /(mdi-v6|fontawesome-v6)\.js$/ */
'quasar/icon-set/' + iconSetName
)
.then(setDefinition => {
// ! NOTICE ssrContext param:
Quasar.iconSet.set(setDefinition.default, ssrContext)
})
).then(setDefinition => {
Quasar.iconSet.set(setDefinition.default, ssrContext)
})
}
catch (err) {
// Requested Quasar Icon Set does not exist,
Expand Down
72 changes: 63 additions & 9 deletions docs/src/pages/options/quasar-language-packs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,34 @@ Check what tags you need to include in your HTML files on [UMD / Standalone](/st
Quasar CLI: If your desired Quasar Language Pack must be dynamically selected (example: depends on a cookie), then you need to create a boot file: `$ quasar new boot quasar-lang-pack [--format ts]`. This will create `/src/boot/quasar-lang-pack.js` file. Edit it to:

```js
// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/lang/(de|fr).mjs')

export default async () => {
const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)

try {
langList[ `../../node_modules/quasar/lang/${ langIso }.mjs` ]().then(lang => {
Quasar.lang.set(lang.default)
})
}
catch (err) {
// Requested Quasar Language Pack does not exist,
// let's not break the app, so catching error
}
}
```

```js
// -- With @quasar/app-webpack --

import { Quasar } from 'quasar'

export default async () => {
Expand All @@ -90,10 +118,9 @@ export default async () => {
await import(
/* webpackInclude: /(de|en-US)\.js$/ */
'quasar/lang/' + langIso
)
.then(lang => {
Quasar.lang.set(lang.default)
})
).then(lang => {
Quasar.lang.set(lang.default)
})
}
catch (err) {
// Requested Quasar Language Pack does not exist,
Expand All @@ -118,6 +145,35 @@ Notice the use of the [Webpack magic comment](https://webpack.js.org/api/module-
When dealing with SSR, we can't use singleton objects because that would pollute sessions. As a result, as opposed to the dynamical example above (read it first!), you must also specify the `ssrContext` from your boot file:

```js
// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/lang/(de|fr).mjs')

// ! NOTICE ssrContext param:
export default async ({ ssrContext }) => {
const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)

try {
langList[ `../../node_modules/quasar/lang/${ langIso }.mjs` ]().then(lang => {
Quasar.lang.set(lang.default, ssrContext)
})
}
catch (err) {
// Requested Quasar Language Pack does not exist,
// let's not break the app, so catching error
}
}
```

```js
// -- With @quasar/app-webpack --

import { Quasar } from 'quasar'

// ! NOTICE ssrContext param:
Expand All @@ -128,11 +184,9 @@ export default async ({ ssrContext }) => {
await import(
/* webpackInclude: /(de|en-US)\.js$/ */
'quasar/lang/' + langIso
)
.then(lang => {
// ! NOTICE ssrContext param:
Quasar.lang.set(lang.default, ssrContext)
})
).then(lang => {
Quasar.lang.set(lang.default, ssrContext)
})
}
catch (err) {
// Requested Quasar Language Pack does not exist,
Expand Down
26 changes: 0 additions & 26 deletions docs/src/pages/quasar-cli-vite/handling-assets.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,32 +29,6 @@ Every file and folder from the "public" folder are copied into your production b
When not building a SPA/PWA/SSR, then `/public/icons/*` and `/public/favicon.ico` will NOT be embedded into your app because they would not serve any purpose. For example, Electron or Cordova apps do not require those files.
:::

## Vue Binding Requires Statics Only
Please note that whenever you bind "src" to a variable in your Vue scope, it must be one from the public folder. The reason is simple: the URL is dynamic, so Vite's tools (which pack up assets at compile time) don't know which file you'll be referencing at runtime, so it won't process the URL.

```html
<template>
<!-- imageSrc MUST reference a file from /public -->
<img :src="imageSrc">
</template>

<script>
export default {
setup () {
return {
/*
Referencing /public.
Notice string doesn't start with a slash. (/)
*/
imageSrc: 'logo.png'
}
}
}
</script>
```

You can force serving static assets by binding `src` to a value with Vue. Instead of `src="path/to/image"` use `:src=" 'path/to/image' "` or `:src="imageSrc"`. Please note the usage of single quotes within double quotes on the second code example (spaces have been added to see this visually on the documentation website - normally you would not have the spaces).

## More info with Vite

Please read Vite's guide [here](https://vitejs.dev/guide/assets.html).

0 comments on commit e532388

Please sign in to comment.