Static Site Generator App Extension for Quasar v2, the Vue.js Framework
A Quasar v2 App Extension to generate static site AKA JAMstack.
:new: Supports Vite since v4.4.0.
This project was created to fill this Feature Request from Quasar.
:warning: Looking for Quasar v1 with Vue 2 ? See corresponding quasar-app-extension-ssg v2 documentation instead of latest version.
Live Demo | Installing | Uninstalling | Upgrading | Developing | Usage | Configuration | Infos
Live Demo
A live demo built from a fresh new Quasar CLI project (with Vite) is available at https://quasar-app-extension-ssg-vite.netlify.app.
The demo achieves a Google PageSpeed Insights score of 100 for mobile and desktop platforms.
View mobile report
[](https://pagespeed.web.dev/report?url=https%3A%2F%2Fquasar-app-extension-ssg-vite.netlify.app%2F&form_factor=mobile)
View desktop report
[](https://pagespeed.web.dev/report?url=https%3A%2F%2Fquasar-app-extension-ssg-vite.netlify.app%2F&form_factor=desktop)
Installing
Run this command into the Quasar project:
quasar ext add ssg
This will find and install the extension’s module. Once the installation is complete, interactive prompts will wait for responses.
Prompts
Vite
- `add scripts into package.json?`: Extends package.json by adding scripts.
```javascript
scripts: {
'build:ssg': 'quasar ssg generate',
'serve:ssg': 'quasar ssg serve dist/ssg'
}
```
- `Add auto-completion of ssg property of quasar.config.js file for IDE ?`: Augments `configure()` helper from [`quasar/wrappers`](https://github.com/quasarframework/quasar/blob/quasar-v2.9.2/ui/wrappers/index.js#L17&L19) to get a better [IDE autocomplete](https://quasar.dev/quasar-cli-vite/quasar-config-js#ide-autocompletion) experience with the extension.
- `Inline critical css and async load the rest ?`: Uses [Beastcss](https://github.com/freddy38510/beastcss) to inline critical CSS and async load the rest for each generated page.
Webpack
- `add scripts into package.json?`: Extends package.json by adding scripts.
```javascript
scripts: {
'build:ssg': 'quasar ssg generate',
'serve:ssg': 'quasar ssg serve dist/ssg'
}
```
- `Add auto-completion of ssg property of quasar.config.js file for IDE ?`: Augments `configure()` helper from [`quasar/wrappers`](https://github.com/quasarframework/quasar/blob/quasar-v2.9.2/ui/wrappers/index.js#L17&L19) to get a better [IDE autocomplete](https://quasar.dev/quasar-cli-vite/quasar-config-js#ide-autocompletion) experience with the extension.
- `Inline critical css and async load the rest ?`: Uses [Beastcss](https://github.com/freddy38510/beastcss) to inline critical CSS and async load the rest for each generated page.
- `Inline CSS from Vue SFC