I am using nuxt.js and with this image lazyload plugin
This works great, but now I want to use some options of the plugin, like a custom loader image.
The code would look like this in my nuxt plugin file:
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
const options = {
preLoad: 1.3,
loading: '~/static/media/loader.svg',
attempt: 1,
// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
listenEvents: [ 'scroll' ]
}
Vue.use(VueLazyload, options)
In the plugins docs there is an example using a path like this:
loading: 'dist/loading.gif',
But I want to see the loading not only after I generated a dist folder, I want to see in locally.
So my question is:
How would I set paths in a Vue plugin file to make them work locally and after nuxt generate?
As an example: in CSS files you can set url('~/static/…PATH')
I have not found anything here:
https://nuxtjs.org/guide/directory-structure/
nor here
https://nuxtjs.org/guide/assets
As #Aldarund correctly proposed
loading: require('~/static/media/loading.svg'),
works perfectly.
Thanks 👍🏼
Related
I'm planning to setup env for testing in Visual Studio Code IDE.
The problem that I have is that VS Code in any XXX.test.js file don't know what is browser or page variable. I'm receiving such errors:
'page' is not defined.eslint(no-undef)
Is this something related only to IDE that I'm using? Some plugin from this IDE? Or maybe it is normal for jest-puppeteer and I need to get used to it?
The whole test when it runs works ok but it seems that IDE only don't know what is page.
I'm working right now on this simple example and I'm just learning this but I'm trying to setup env for it in the same time. My Network.test.js file looks like this. No imports or require at all at the top of the file.
describe("Google", () => {
beforeAll(async () => {
await page.goto("https://google.com");
});
it('should display "google" text on page', async () => {
await expect(page).toMatch("google");
});
});
Later I need to switch it to Typescript which I think will be also a challenge. Now I just want to focus on pure javascript approach.
How to get rid of this IDE errors that are not errors in reality?
Add the Puppeteer globals, Page and Browser, to your ESLint config.
Then, add the following to your .eslintrc file:
env: {
jest: true,
},
// Puppeteer globals
globals: {
page: true,
browser: true,
},
See Here : Link
I've created a vue3 cli project with Mocha testing:
vue create vue_proj_with_mocha_testing
(accept defaults)
cd vue_proj_with_mocha_testing
vue add unit-mocha
Then in Visual Code I install the Mocha Test Explorer extension, restart, add the folder to the workspace, click the folder, ctrl-shift-p and Mocha Test Explorer : "Enable for a workspace folder". Out of the box Mocha Test Explorer doesn't seem to like vuecli's example.spec.js test:
import { expect } from 'chai'
import { shallowMount } from '#vue/test-utils'
import HelloWorld from '#/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})
I add this entry to settings.json so that Test Explorer finds the vue "tests" folder, which is different from the default of "test".
"mochaExplorer.files": ["tests/**/*.spec.js"],
And then receive this error in Test Explorer:
import { expect } from 'chai';
^^^^^^
SyntaxError: Cannot use import statement outside a module
This indicates I have some transpiling work to do, and Mocha Test Explorer indicates the way to do that is the "mochaTestExplorer" fields in settings.json, but I'm not sure what combination of babel packages would be required. What should be done to run this out-of-the-box vue-cli-3 test in Mocha Test Explorer in Visual Studio Code? Here is my current guess:
"mochaExplorer.require": [
"#babel/preset-env",
"#babel/register",
"#babel/polyfill",
"#babel/plugin-transform-runtime"
],
First, add #babel/register in yours devDependencies.
After, add in your Visual Studio Code settings.json:
"mochaExplorer.files": "tests/**/*.spec.js",
"mochaExplorer.env": {
"NODE_ENV": "test"
},
"mochaExplorer.require": [
"#babel/register"
]
Finally, changes your babel.config.js to like this:
const presets = [];
if (process.env.NODE_ENV === 'test') presets.push('#babel/preset-env');
else presets.push('#vue/cli-plugin-babel/preset');
module.exports = {
presets,
};
I'm afraid what you want is not possible - problem is it is not enough to setup Babel correctly. Vue single file components (.vue) need to be processed by Vue Loader which is Webpack loader plugin.
And there is no easy way how to setup Mocha Test Explorer to use webpack as indicated by the author himself in this thread - Support for vue cli projects
So I decided to split my tests into two groups, tests/ui (tests using Vue components) and tests/unit (non-ui tests) and use setup described by Fernando with these modifications:
Configure Mocha Test Explorer to only search for non-ui tests:
"mochaExplorer.files": "tests/unit/**/*.spec.js",
package.json:
"test:unit": "vue-cli-service test:unit tests/unit/**/*.spec.js tests/ui/**/*.spec.js",
...to include both folders when running tests from command-line
Note: Last step - modifying babel.config.js - is not needed, everything works fine without it....
On a slightly different config, i worked for me: in .vscode/settings.json
{
"mochaExplorer.require": "esm"
}
esm should also be in your dev dependencies
I am using create-react-app and trying to install mapbox-gl-draw.
npm install #mapbox/mapbox-gl-draw
This works with some npm warnings. I then try to pull mapbox-gl-draw into a component like this:
import React,{Component} from 'react';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
import ReactMapboxGl from 'react-mapbox-gl';
import MapboxDraw from '#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'
console.log(MapboxDraw)
I just get an empty object.
I am using create-react-app. Do I need to use a different webpack .config file.
What is the best way to import mapbox modules like this?
If you're using webpack, you need to alias to use mapbox-gl dist file, here is how I have done it using webpack2:
resolve: {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx', '.json', '.css', '.svg'],
alias: {
// mapbox-gl related packages in webpack should use dist instead of the default src
'#mapbox/mapbox-gl-draw': path.resolve(root, 'node_modules/#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js'),
},
},
Variable "root" was defined earlier in the file to refer to the root directory of the project, on the same level as package.json etc.
The same problem can happen in react-map-gl-alt where you need to alias 'mapbox' to 'node_modules/mapbox/dist/distfilehere.js'.
To expand upon medv's answer, at current, in your package.json, you need to add the mapbox-gl v0.270 - v0.38.0, like:
"mapbox-gl": ">=0.27.0 <=0.38.0 when using "#mapbox/mapbox-gl-draw": "^1.0.1".
This is explained at the 'Requires' line here & if you look at the peerDependencies in the package.json.
For instance with bower I could do something like this to get only the scss files (excluding js):
{
"dependencies": {
"bootstrap-sass": "~3.3.5"
},
"overrides": {
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss"
]
}
}
}
I am having an hard time understanding how to do it with systemjs. in the config.js file I guess but even reading the docs I could not figure it out.
My use case is: while developing I am loading Material angular with systemjs but I want to load only the js files, not the css, which I want to manage indenpdently in my scss. Instead systemjs keep loading the file angular-material.css. I just started with systemjs and jspm, hope you can help.
nb: my problem is not related to the jspm build or bundle process but to the development time with these tools.
JSPM supports overrides as well. See https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#testing-configuration for configuration options.
Using JSPM overrides you can easily override the main file and directories and files that you need from a module.
Upd. The css dependency is defined in the registry: https://github.com/jspm/registry/blob/974beb8b6520f4c1b3c6373db32ad05da5c82446/package-overrides/github/angular/bower-material%400.4.0.json It needs to be overwritten with the local override.
I am trying to import famous into my application
When i create a breakpoint in the base index.html file in ember cli and look at what require seems to know about i see famo.us is there
in my brocfile i have tried the following
app.import('vendor/famous/famous.js', {
'famous/core/Context':''
});
app.import('vendor/famous/famous.js', {
'famous/core/Context':'default'
});
app.import('vendor/famous/famous.js');
this may be fixed by master of loader.js https://github.com/stefanpenner/loader.js/issues/25