diff --git a/quasar.config.js b/quasar.config.js
index 6c4bc930..226957ad 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -8,259 +8,249 @@
// Configuration for your app
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js
-const ESLintPlugin = require('eslint-webpack-plugin')
-const path = require('path')
+const ESLintPlugin = require('eslint-webpack-plugin');
+const path = require('path');
-const { configure } = require('quasar/wrappers')
+const { configure } = require('quasar/wrappers');
module.exports = configure(function (ctx) {
- return {
- // https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
- supportTS: false,
+ return {
+ // https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
+ supportTS: false,
- // https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
- // preFetch: true,
+ // https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
+ // preFetch: true,
- // app boot file (/src/boot)
- // --> boot files are part of "main.js"
- // https://v2.quasar.dev/quasar-cli-webpack/boot-files
- boot: [
- 'i18n',
- 'axios',
- 'error-handler',
- 'app'
- ],
+ // app boot file (/src/boot)
+ // --> boot files are part of "main.js"
+ // https://v2.quasar.dev/quasar-cli-webpack/boot-files
+ boot: ['i18n', 'axios', 'error-handler', 'app'],
- // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
- css: [
- 'app.scss',
- 'width.scss',
- 'responsive.scss'
- ],
+ // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
+ css: ['app.scss', 'width.scss', 'responsive.scss'],
- // https://github.com/quasarframework/quasar/tree/dev/extras
- extras: [
- // 'ionicons-v4',
- // 'mdi-v5',
- // 'fontawesome-v6',
- // 'eva-icons',
- // 'themify',
- // 'line-awesome',
- // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+ // https://github.com/quasarframework/quasar/tree/dev/extras
+ extras: [
+ // 'ionicons-v4',
+ // 'mdi-v5',
+ // 'fontawesome-v6',
+ // 'eva-icons',
+ // 'themify',
+ // 'line-awesome',
+ // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
- 'roboto-font', // optional, you are not bound to it
- 'material-icons' // optional, you are not bound to it
- ],
+ 'roboto-font', // optional, you are not bound to it
+ 'material-icons' // optional, you are not bound to it
+ ],
- // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
- build: {
- vueRouterMode: 'hash', // available values: 'hash', 'history'
+ // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
+ build: {
+ vueRouterMode: 'hash', // available values: 'hash', 'history'
- // transpile: false,
- // publicPath: '/',
+ // transpile: false,
+ // publicPath: '/',
- // Add dependencies for transpiling with Babel (Array of string/regex)
- // (from node_modules, which are by default not transpiled).
- // Applies only if "transpile" is set to true.
- // transpileDependencies: [],
+ // Add dependencies for transpiling with Babel (Array of string/regex)
+ // (from node_modules, which are by default not transpiled).
+ // Applies only if "transpile" is set to true.
+ // transpileDependencies: [],
- // rtl: true, // https://quasar.dev/options/rtl-support
- // preloadChunks: true,
- // showProgress: false,
- // gzip: true,
- // analyze: true,
+ // rtl: true, // https://quasar.dev/options/rtl-support
+ // preloadChunks: true,
+ // showProgress: false,
+ // gzip: true,
+ // analyze: true,
- // Options below are automatically set depending on the env, set them if you want to override
- // extractCSS: false,
+ // Options below are automatically set depending on the env, set them if you want to override
+ // extractCSS: false,
- // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
- // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+ // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
+ // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
- chainWebpack (chain) {
- chain.plugin('eslint-webpack-plugin')
- .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }])
+ chainWebpack(chain) {
+ chain
+ .plugin('eslint-webpack-plugin')
+ .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
- chain.module
- .rule('i18n-resource')
- .test(/\.(json5?|ya?ml)$/)
- .include.add(path.resolve(__dirname, './src/i18n'))
- .end()
- .type('javascript/auto')
- .use('i18n-resource')
- .loader('@intlify/vue-i18n-loader')
- chain.module
- .rule('i18n')
- .resourceQuery(/blockType=i18n/)
- .type('javascript/auto')
- .use('i18n')
- .loader('@intlify/vue-i18n-loader')
- }
+ chain.module
+ .rule('i18n-resource')
+ .test(/\.(json5?|ya?ml)$/)
+ .include.add(path.resolve(__dirname, './src/i18n'))
+ .end()
+ .type('javascript/auto')
+ .use('i18n-resource')
+ .loader('@intlify/vue-i18n-loader');
+ chain.module
+ .rule('i18n')
+ .resourceQuery(/blockType=i18n/)
+ .type('javascript/auto')
+ .use('i18n')
+ .loader('@intlify/vue-i18n-loader');
+ }
+ },
- },
+ // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
+ devServer: {
+ server: {
+ type: 'http'
+ },
+ port: 8080,
+ open: false,
+ // static: __dirname,
+ headers: { 'Access-Control-Allow-Origin': '*' },
+ // stats: { chunks: false },
+ proxy: {
+ '/api': 'http://localhost:3000',
+ '/': {
+ target: 'http://localhost:3001',
+ bypass: req => (req.path !== '/' ? req.path : null)
+ }
+ }
+ },
- // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
- devServer: {
- server: {
- type: 'http'
- },
- port: 8080,
- open: false,
- // static: __dirname,
- headers: { 'Access-Control-Allow-Origin': '*' },
- // stats: { chunks: false },
- proxy: {
- '/api': 'http://localhost:3000',
- '/': {
- target: 'http://localhost:3002',
- bypass: (req) => req.path !== '/' ? req.path : null
+ // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
+ framework: {
+ config: {},
+ autoImportComponentCase: 'pascal',
+ // iconSet: 'material-icons', // Quasar icon set
+ // lang: 'en-US', // Quasar language pack
+
+ // For special cases outside of where the auto-import strategy can have an impact
+ // (like functional components as one of the examples),
+ // you can manually specify Quasar components/directives to be available everywhere:
+ //
+ // components: [],
+ // directives: [],
+
+ // Quasar plugins
+ plugins: ['Notify']
+ },
+
+ // animations: 'all', // --- includes all animations
+ // https://quasar.dev/options/animations
+ animations: [],
+
+ // https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
+ ssr: {
+ pwa: false,
+
+ // manualStoreHydration: true,
+ // manualPostHydrationTrigger: true,
+
+ prodPort: 3000, // The default port that the production server should use
+ // (gets superseded if process.env.PORT is specified at runtime)
+
+ maxAge: 1000 * 60 * 60 * 24 * 30,
+ // Tell browser when a file from the server should expire from cache (in ms)
+
+ chainWebpackWebserver(chain) {
+ chain
+ .plugin('eslint-webpack-plugin')
+ .use(ESLintPlugin, [{ extensions: ['js'] }]);
+ },
+
+ middlewares: [
+ ctx.prod ? 'compression' : '',
+ 'render' // keep this as last one
+ ]
+ },
+
+ // https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa
+ pwa: {
+ workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
+ workboxOptions: {}, // only for GenerateSW
+
+ // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
+ // if using workbox in InjectManifest mode
+
+ chainWebpackCustomSW(chain) {
+ chain
+ .plugin('eslint-webpack-plugin')
+ .use(ESLintPlugin, [{ extensions: ['js'] }]);
+ },
+
+ manifest: {
+ name: 'Hedera',
+ short_name: 'Hedera',
+ description: "Verdnatura's webshop",
+ display: 'standalone',
+ orientation: 'portrait',
+ background_color: '#ffffff',
+ theme_color: '#027be3',
+ icons: [
+ {
+ src: 'icons/icon-128x128.png',
+ sizes: '128x128',
+ type: 'image/png'
+ },
+ {
+ src: 'icons/icon-192x192.png',
+ sizes: '192x192',
+ type: 'image/png'
+ },
+ {
+ src: 'icons/icon-256x256.png',
+ sizes: '256x256',
+ type: 'image/png'
+ },
+ {
+ src: 'icons/icon-384x384.png',
+ sizes: '384x384',
+ type: 'image/png'
+ },
+ {
+ src: 'icons/icon-512x512.png',
+ sizes: '512x512',
+ type: 'image/png'
+ }
+ ]
+ }
+ },
+
+ // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova
+ cordova: {
+ // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+ },
+
+ // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
+ capacitor: {
+ hideSplashscreen: true
+ },
+
+ // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
+ electron: {
+ bundler: 'packager', // 'packager' or 'builder'
+
+ packager: {
+ // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+ // OS X / Mac App Store
+ // appBundleId: '',
+ // appCategoryType: '',
+ // osxSign: '',
+ // protocol: 'myapp://path',
+ // Windows only
+ // win32metadata: { ... }
+ },
+
+ builder: {
+ // https://www.electron.build/configuration/configuration
+
+ appId: 'hedera-web'
+ },
+
+ // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+
+ chainWebpackMain(chain) {
+ chain
+ .plugin('eslint-webpack-plugin')
+ .use(ESLintPlugin, [{ extensions: ['js'] }]);
+ },
+
+ chainWebpackPreload(chain) {
+ chain
+ .plugin('eslint-webpack-plugin')
+ .use(ESLintPlugin, [{ extensions: ['js'] }]);
+ }
}
- }
- },
-
- // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
- framework: {
- config: {},
- autoImportComponentCase: 'pascal',
- // iconSet: 'material-icons', // Quasar icon set
- // lang: 'en-US', // Quasar language pack
-
- // For special cases outside of where the auto-import strategy can have an impact
- // (like functional components as one of the examples),
- // you can manually specify Quasar components/directives to be available everywhere:
- //
- // components: [],
- // directives: [],
-
- // Quasar plugins
- plugins: [
- 'Notify'
- ]
- },
-
- // animations: 'all', // --- includes all animations
- // https://quasar.dev/options/animations
- animations: [],
-
- // https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
- ssr: {
- pwa: false,
-
- // manualStoreHydration: true,
- // manualPostHydrationTrigger: true,
-
- prodPort: 3000, // The default port that the production server should use
- // (gets superseded if process.env.PORT is specified at runtime)
-
- maxAge: 1000 * 60 * 60 * 24 * 30,
- // Tell browser when a file from the server should expire from cache (in ms)
-
- chainWebpackWebserver (chain) {
- chain.plugin('eslint-webpack-plugin')
- .use(ESLintPlugin, [{ extensions: ['js'] }])
- },
-
- middlewares: [
- ctx.prod ? 'compression' : '',
- 'render' // keep this as last one
- ]
- },
-
- // https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa
- pwa: {
- workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
- workboxOptions: {}, // only for GenerateSW
-
- // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
- // if using workbox in InjectManifest mode
-
- chainWebpackCustomSW (chain) {
- chain.plugin('eslint-webpack-plugin')
- .use(ESLintPlugin, [{ extensions: ['js'] }])
- },
-
- manifest: {
- name: 'Hedera',
- short_name: 'Hedera',
- description: 'Verdnatura\'s webshop',
- display: 'standalone',
- orientation: 'portrait',
- background_color: '#ffffff',
- theme_color: '#027be3',
- icons: [
- {
- src: 'icons/icon-128x128.png',
- sizes: '128x128',
- type: 'image/png'
- },
- {
- src: 'icons/icon-192x192.png',
- sizes: '192x192',
- type: 'image/png'
- },
- {
- src: 'icons/icon-256x256.png',
- sizes: '256x256',
- type: 'image/png'
- },
- {
- src: 'icons/icon-384x384.png',
- sizes: '384x384',
- type: 'image/png'
- },
- {
- src: 'icons/icon-512x512.png',
- sizes: '512x512',
- type: 'image/png'
- }
- ]
- }
- },
-
- // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova
- cordova: {
- // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
- },
-
- // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
- capacitor: {
- hideSplashscreen: true
- },
-
- // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
- electron: {
- bundler: 'packager', // 'packager' or 'builder'
-
- packager: {
- // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
-
- // OS X / Mac App Store
- // appBundleId: '',
- // appCategoryType: '',
- // osxSign: '',
- // protocol: 'myapp://path',
-
- // Windows only
- // win32metadata: { ... }
- },
-
- builder: {
- // https://www.electron.build/configuration/configuration
-
- appId: 'hedera-web'
- },
-
- // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
-
- chainWebpackMain (chain) {
- chain.plugin('eslint-webpack-plugin')
- .use(ESLintPlugin, [{ extensions: ['js'] }])
- },
-
- chainWebpackPreload (chain) {
- chain.plugin('eslint-webpack-plugin')
- .use(ESLintPlugin, [{ extensions: ['js'] }])
- }
-
- }
- }
-})
+ };
+});
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
new file mode 100644
index 00000000..f4e8a36c
--- /dev/null
+++ b/src/components/ui/VnImg.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/Cms/HomeView.vue b/src/pages/Cms/HomeView.vue
index ba7983e1..971e1544 100644
--- a/src/pages/Cms/HomeView.vue
+++ b/src/pages/Cms/HomeView.vue
@@ -1,6 +1,6 @@
@@ -27,15 +22,8 @@ onMounted(async () => await fetchData());