Is there a module for lodash that I can import into my dojo project? I know that I can always reference it by window._, but I wanted to be more conventional (as far as dojo is concerned) and formally require it into my module.
Thanks in advance.
Have you tried the AMD branch? https://github.com/lodash/lodash/tree/3.9.3-amd
You should then be able to add it to your packages, and require it in like any other module.
Edit: It worked locally by adding lodash to the packages to my dojoConfig object
var dojoConfig = {
async: true,
baseUrl: '.',
packages: [
'app',
'dgrid',
'dijit',
'dojo',
'dojox',
'put-selector',
'xstyle',
'lodash'
],
selectorEngine: 'lite',
tlmSiblingOfDojo: false
};
I was then able to use the lodash modules:
define(['lodash/array/union'], function (union) {
var app = {};
// Lodash example
var employees = ['John', 'Sam', 'Bob'],
employees2 = ['Jane', 'Kari', 'Jamie'];
console.log(employees);
console.log(employees2);
console.log('=== Union Result ===');
console.log(union(employees, employees2));
return app;
});
Related
I am trying to update my postcss.config.js file to support two plugins: postcss-nested and postcss-mixins. Tech used: react project, using webpack and npm.
From PostCSS documentation, it says i need to add the plugins as an array and in this StackOverflow post, it similarly says 'the export in the postcss.config.js needs to be an object with a plugins property that holds an array of your plugins.' When i try that, i'm getting linting erros and it seems wrong. Any suggestions welcome.
Old postcss.config.js
module.exports = {
parser: 'postcss-scss',
plugins: {
'precss': {
'import': {
extension: 'pcss',
prefix: '_',
},
},
'postcss-calc': {
mediaQueries: true,
},
},
};
New postcss.config.js
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-mixins'),
require('postcss-nested'),
],
'precss': {
'import': {
extension: 'pcss',
prefix: '_',
},
},
'postcss-calc': {
mediaQueries: true,
},
};
};
One other question: will any of my postcss plugins work if i don't include them in my postcss.config.js file? I am looking at our codebase and seeing many postcss plugins installed (such as autoprefixer) and they are not in the config file...so not sure if that was ever working for us.
I wanted to create a custom plugin for a local databaase in Nuxt.js, after I was done with the code I registered it in nuxt.config.js and it didn't work. So I've tried the example code on docs to see what I was doing wrong, and the thing is, example code didn't work too. Here is how I registered it:
plugins/hello.js
export default ({ app }, inject) => {
inject("hello", msg => console.log(`Hello ${msg}!`));
};
nuxt.config.js
module.exports = {
ssr: false,
target: "static",
head: {
title: "project-title",
meta: [{ charset: "utf-8" }],
},
loading: false,
plugins: [{ ssr: true, src: "#/plugins/icons.js" }, "#/plugins/hello.js"],
modules: ["#nuxtjs/axios", "#nuxtjs/auth-next"],
}
Whenever I try to use this.$hello("something"), Nuxt returns this.$hello is not a function
Hmm, got it. After deleting and reinstalling node_modules it's resolved, then I tried changing the name of the plugin file, after then build failed from ./node_modules/#nuxt/webpack/node_modules/babel-loader/lib/index.js. After reinstalling packages again (deleted .nuxt, node_modules and lock file) issue is resolved.
I have weird problem.
I want use this hover-effect library (https://github.com/robin-dela/hover-effect) in my nuxt project.
This i have in my contact.vue in script tags
import hoverEffect from 'hover-effect'
export default {
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('#/assets/images/1.jpg'),
image2: require('#/assets/images/2.jpg'),
displacementImage: require('#/assets/images/dist2.jpg'),
})
},
}
And that effect works perfectly.. BUT when i refresh the page i got this error:
SyntaxError Cannot use import statement outside a module
So i tried add this plugin into plugins/hover-effect.js
import Vue from 'vue'
import hoverEffect from 'hover-effect'
Vue.use(hoverEffect)
then in nuxt.config.js
plugins: [{ src: '~/plugins/hover-effect', mode: 'client' }],
But nothing works.. its always error: hoverEffect is not defined. I tried another 20 ways with no success. I tried this effect in normal Vue project and it works but not in nuxt.js. Can somebody help me with this?
You can configure it in the head of the page:
Page.vue
export default {
head() {
return {
script: [
{src: '../dist/hover-effect.umd.js'}
]
}
},
...
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('#/assets/images/1.jpg'),
image2: require('#/assets/images/2.jpg'),
displacementImage: require('#/assets/images/dist2.jpg'),
})
},
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
// Doc: https://github.com/nuxt/content
'#nuxt/content',
'hover-effect'
],
Have you tried to add hover-effect library to modules in nuxt.config.js file? All I did was install the package and add it to the module and then have the same code as your script tag. Hope it helped you!
I'm trying to install Vue froala on my Laravel project.
I followed the exact instruction provided here: https://github.com/froala/vue-froala-wysiwyg but I get:
Cannot find module 'babel-runtime/core-js/json/stringify
Not sure if I have to touch the webpack.mix.js. I only try to add jQuery required by Froala. So now it looks like that:
const mix = require('laravel-mix');
mix.webpackConfig(webpack => {
return {
resolve: {
extensions: ['.js', '.vue'],
alias: {
'#':__dirname + '/resources'
}
},
plugins: [
// ...
// Jquery loader plugin.
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
})
I found people fixing a similar problem manually installing babel-runtime as a package.json dependancy. I did, but it didn't work.
Any help?
Based on a recommendation, I used:
import VueFroala from 'vue-froala-wysiwyg/dist/vue-froala.min.js'
... which worked for me.
I'm having trouble with setting up dojo. Anything defined in the dojo config seems to correctly load using the localhost:8080/Scripts/foo.js path. However if I then try to load a module without this, say:
require(['foo'], function (_foo) { });
Then the client fails the request, with the attempted path being localhost:8080/foo.js. Obviously wrong.
What do I need to change?
// Configuration for the dojo AMD module loader
dojoConfig = {
baseUrl: "/Scripts",
packages: [{
name: 'esri',
location: 'esri'
}, {
name: 'dojo',
location: 'dojo/dojo'
}, {
name: 'dojox',
location: 'dojo/dojox'
}, {
name: 'dijit',
location: 'dojo/dijit'
}, {
name: 'jquery',
location: '.',
main: 'jquery-2.0.2'
},
Thanks.
Either of these will solve your problem:
Set dojoConfig.tlmSiblingOfDojo = false.
Define 'foo' as a package with an explicit location.
Have a look at this link : http://dojotoolkit.org/documentation/tutorials/1.6/dojo_config/
Maybe the change from packages to modulePaths would help you.
Otherwise i would define the packages on the ordinary way :
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
regards