I have a Laravel 9 application using Vite, VueJS 3, InertiaJS and Quasar. I installed Quasar with the Vite Plugin Doc here. Now my problem is that I want to use the Flex Addons to have responsive margin/padding Flex addon, but in the documentation it is written that it needs to be enabled through quasar.config.js > framework > cssAddon: true , but I don't have a quasar.config.js file. I only have a vite.config.js file and my app.js root file where I load Quasar.
So is there an other way to enable cssAddon with vite plugin ? And is there an other way to have responsive margin without enabling cssAddon ?
Thanks for your help :)
This is my app.js file
import './bootstrap';
import { createApp, h } from 'vue';
import { Quasar } from 'quasar';
import quasarLang from 'quasar/lang/fr';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import '#quasar/extras/material-icons/material-icons.css'
import 'quasar/src/css/index.sass'
import AppLayout from './Layouts/AppLayout.vue';
createInertiaApp({
resolve: name => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.use(Quasar, {
plugins: {},
lang: quasarLang,
})
.mount(el);
}
})
This is my vite.config.js file
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '#quasar/vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
//'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {},
},
}),
quasar({
sassVariables: 'resources/sass/quasar-variables.scss',
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
});
I tried to add cssAddon:true under Quasar in both files but it doesn't work.
Related
I have a vanilla project generated by vite, I wonder how to include .ttf Font in vite.config.js. I've installed vite-plugin-fonts
Here is the config file:
vite.config.js
import glsl from 'vite-plugin-glsl';
import { imagetools } from 'vite-imagetools';
import { VitePluginFonts } from 'vite-plugin-fonts'
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// font
server: {
https: false,
port: 1414,
},
});
How can I do this ?
I have a simple Jest test for my Nest JS project.
The Jest looks like:
import { Test, TestingModule } from '#nestjs/testing';
import { IbmVpcController } from './ibm.vpc.controller';
import { IbmVpcServiceMock } from './ibm.vpc.service.mock';
import { ModuleMocker, MockFunctionMetadata } from 'jest-mock';
import { MOCKED_VPC } from '../../repository/ibm/mock.vpc.data';
const moduleMocker = new ModuleMocker(global);
describe('IbmVpcController', () => {
let controller: IbmVpcController;
beforeEach(async () => {
const module: TestingModule = await Test.createTestingModule({
controllers: [IbmVpcController],
providers: [IbmVpcServiceMock]
})
.useMocker((token) => {
if (token === IbmVpcServiceMock) {
return {
list: jest.fn().mockResolvedValue(MOCKED_VPC.VPCs),
get: jest.fn().mockResolvedValue(MOCKED_VPC.VPCs[0]),
create: jest.fn().mockResolvedValue(MOCKED_VPC.VPCs[0]),
update: jest.fn().mockResolvedValue(MOCKED_VPC.VPCs[0]),
};
}
if (typeof token === 'function') {
const mockMetadata = moduleMocker.getMetadata(token) as MockFunctionMetadata<any, any>;
const Mock = moduleMocker.generateFromMetadata(mockMetadata);
return new Mock();
}
})
.compile();
controller = module.get<IbmVpcController>(IbmVpcController);
});
it('should be defined', () => {
expect(controller).toBeDefined();
});
});
My jest.config.js looks like:
module.exports = {
verbose: true,
preset: "ts-jest",
testEnvironment: "node",
roots: ["./src"],
transform: { "\\.ts$": ["ts-jest"] },
testRegex: "(/__test__/.*|(\\.|/)(spec))\\.ts?$",
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
transformIgnorePatterns: [
'<rootDir>/node_modules/',
],
globals: {
"ts-jest": {
tsconfig: {
// allow js in typescript
allowJs: true,
},
},
},
};
However it is failing with the following error:
FAIL apps/protocols/src/ibm/vpc/ibm.vpc.controller.spec.ts
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:\Users\pradipm\clients\CloudManager\cm_6\occm\client-infra\nest-services\node_modules\axios\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import axios from './lib/axios.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (../../node_modules/retry-axios/src/index.ts:124:1)
Now able to get it what I am missing in my typescript Nest's Jest configuration.
Basically I tried out some more options also:
I tried out specifying the transformIgnorePatterns as only '/node_modules/'.
Tried out excluding the lodash-es', 'axios'
Tried out transformIgnorePattens as '/lib/' (where axois is there)
Added allowJs: true in the tsconfig.app.json compileOptions.
Any help to get trough my first basic test would be helpful.
With axios version 1.1.2 there's a bug with jest. You can resolve it by adding moduleNameMapper: { '^axios$': require.resovle('axios') } to your jest configuration
I have nodeResolve set to only resolve svelte (since I only use stores) and string-argv
// rollup.config.js
import { nodeResolve } from '#rollup/plugin-node-resolve'
import { defineConfig } from 'rollup'
const config = defineConfig({
input: 'main.js',
output: {
file: 'bundle.js',
format: "esm"
},
plugins: [nodeResolve({
preferBuiltins: true,
resolveOnly: ['svelte', 'string-argv']
})],
external: ['cac', 'colors'],
})
export default config
but for some reason references to exports is included in my bundle and importing the module doesn't work. How do i fix this?
EDIT: i checked the string-argv code in node_modules and all the references to exports is in that module.
I want to use vite to pack my esm js to commonjs, but it will clear node modules.
vite.config.js
import { defineConfig } from 'vite';
const config = defineConfig({
envDir: process.cwd(),
build: {
lib: {
entry: 'index.js',
formats: ['cjs']
},
rollupOptions: {
output: {
entryFileNames: '[name].cjs'
}
},
emptyOutDir: true
}
});
export default config;
My example index.js
import Stream from 'node:stream';
console.log(`✨`, `Stream`, Stream);
When builded the stream will be an empty object.
How can I prevent node modules from being cleaned up?
I had a similar issue and solved it by specifying:
build: { ssr: true }
Then to eliminate the warning, you should also specify:
rollupOptions: {
input: 'index.js'
}
With vue-cli it was possible to configure webpack devServer.before function like this:
devServer: {
before(app) {
app.get('/apiUrl', (req, res) => res.send(process.env.API_URL))
}
},
How is it possible to configure Vite dev server to obtain the same behavior?
(I tried with the proxy option but it does not work.)
According to this github issue, environment variables are not accessible in file vite.config.js (neither in vite.config.ts). However, the discussion in this issue also mentions a workaround that you can use in this file:
import { defineConfig, loadEnv } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig(({mode}) => {
const env = loadEnv(mode, process.cwd());
return {
plugins: [
vue(),
],
server: {
proxy: {
'^/apiUrl': {
target: env.VITE_API_TARGET,
changeOrigin: true,
}
}
},
}
})
Note that the variable name must start with VITE_ for this to work.