We Keep Coding

'v-slot' directive doesn't support any modifier

I am using vuetify's datatable, i this we have different slots with some props for example below
<template #header.data-table-select="{ on, props }">
<v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox>
</template>
I am also using vue's eslint plugin to check for any errors/bad code / or any violation , but if i use above code snippet in my file it gives me error
'v-slot' directive doesn't support any modifier
as per this docs it is right https://eslint.vuejs.org/rules/valid-v-slot.html
but it don't have any example to how we handle this case
how can i remove this warning/or make it correct way , without making it exemption
Thanks

I don't see any v-slot in the code you provided so I can show you only my usecase.
With Eslint error:
<template v-slot:item.actions="{ item }">
Without error:
<template v-slot:[`item.actions`]="{ item }">

In eslint-plugin-vue#^7.1.0, you can use allowModifiers option in vue/valid-v-slot rule.
// .eslintrc.js
'vue/valid-v-slot': ['error', {
allowModifiers: true,
}],
vue/valid-v-slot #options

For me the following Entry in settings.json fixed the problem:
"vetur.validation.template": false

EDIT: As notified by the comments and Hexodus' (correct) answer, you can work around the linting warning by using dynamic slot names that return a string(template). 'Not enabling' is no longer recommended, as this is now a standard rule. Thus, I recommend using Hexodus' method over disabling the valid v-slot rule altogether.
Original Post:
You can't really fix this linting warning.
Vue syntax for modifiers use the dot to alter the way a
directive functions (e.g. v-model.number)
The way Vuetify dynamically names their slots uses a dot in order to
select a specific part of the component (#header.data-table-select).
ESLint can't distinguish whether you're trying to set a modifier on a slot (which is impossible), or if you have a slot name that contains a dot.
The easiest thing you can do is disable the rule. Since the 'valid-v-slot' rule isn't enabled by default by any of the base configurations of eslint-plugin-vue, you should be able to find it under "rules" in your eslint config.

I tried Hexodus' answer, but the template wasn't rendering at all in my case.
I got it to work perfectly with this, without any eslint rule modification:
<template #[`item.actions`]="{ item }">

Try this:
<template v-slot:item.createdDate="{ item }">
if you use the format vetur, add this option in vscode settings:
"vetur.validation.template": false

Maybe this isn't the answer, and you also may not buy into my solution but this is what I did.
ANS: I downgraded Vetur to version 0.23! It worked! (Waiting a new version release that addresses the issue.
Open the Extensions side panel on VSCode, right click Vetur and select install other versions.
Alternatively, if your code is working fine, a line before the vue-eslint-plugin error you can try <!-- eslint-disable-next-line vue/no-v-html --> to disable eslint for next line or <!-- eslint-disable --> to disable every disable linting below it.
Worked for some people but not for me and may not work for you. Either way, prefer Vetur downgrade
I am using laravel framework, and vuetify. Previous codes suddenly reported eslint errors with red lines - vue/valid-v-slot directive, adding multiple root nodes to the template, and so on without recommending any quick fix, yet they are all working fine. Answers I got from search never yielded any result till I downgraded, any other solution will be so welcomed!

It worked for me:
in .vue
<template v-slot:[getitemcontrols()]="props">
in .js
methods: {
getitemcontrols() {
return `item.controls`;
},

For me this config added to package.json worked
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/base"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
}

React.js question: How do I apply multiple classes to a component using a ternary operator?

I want to apply multiple classes to a component using a ternary operator. There is a shared ts theme file that includes the general button styles, but I would like to display their sizes in this particular component differently depending on screen width, so have added locally scoped classes for this too.
What is the best approach for this?
...tried this, not working:
...got it working using classNames.

I usually use a small npm package called classNames: https://www.npmjs.com/package/classnames.
It exposes a function that takes a variable number of arguments. If you give strings, they will be basically joined with a space, so you have them all applied:
<Button className={ classNames('first', 'second') } ...
Will be like doing:
<Button className="first second" ...
A nice feature that this package has, is that it can take an object where the key is the class and the value is a boolean that indicates whether to add this class or not, something like:
<Button className={ classNames({ even: index % 2 === 0, disabled: props.isDisabled }) } ...
Now, if index is something like 2, the even class is added to the element.

You can use clsx, I think it's already installed if you use material-ui, and you can see that in material-ui's documentation examples.
import clsx from 'clsx';
// Bellow examples are from the clsx npm site:
// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'
// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'
// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

Material UI classes are compiled to classname strings, you can chain them with a space between each one :
<Button
classes={{
root: isDesktop ? `${classes.saveButton} ${classes.secondStyle}` : classes.disabledSaveButton
}}
>
npm package classnames can do this for you in a cleaner way if you need to handle more complex cases.

You can use two different styles files in css directory for Desktop and Mobile and in index file make switch to export right css.
For example: Styles Directory that contains => 2 css files: Mobile,Desktop and in same directory index.js for export right one.
By Using Theme Providers:
styled-components

How to make Webpack recognize dynamic exports

I'm seeing the following warning when building with Webpack v4 (using babel-loader for the JS files):
Warning in ./src/components/Foo
"export 'ADDENDUM' was not found in '../../types'
...
The import in ./src/components/Foo is:
import { ADDENDUM } from '../../types';
../../types:
import { each } from 'lodash';
export const typesDict = {
ADDENDUM: 'addendum',
};
each(typesDict, (type, typeConstant) => {
exports[typeConstant] = type;
});
This isn't causing a build error, just a warning. The warning is wrong though, since I am exporting ADDENDUM (though dynamically), and everything works as it should.
Is there a way for Webpack to handle these dynamic imports, or to at least turn off the warning? I'm upgrading from Webpack v1 right now, and v1 does not have this problem (or if it does, it's being hidden somehow).
Also please note: I do NOT want to silence all Webpack warnings, such as via the devServer config. I just want to silence this one type of warning.

Based on your ../../types file i assume your approach was to skip writing again the components in the exports object.
Instead of silencing the warning, try something simpler to fix the issue. Since you don't want to write twice the same names, take a look at my example.
No lodash is required, no loops are used and exported constants are written once.
../../types:
export const ADDENDUM = 'addendum';
export const ADDENDUM2 = 'addendum2';
export const ADDENDUM3 = 'addendum3';
That is all, no more dynamic imports, no more warnings.
UPDATE:
Your code is indeed valid, but when you use dynamic exports/imports, compilers/bundlers loose trace of your exports(in your case) since they don't check the contents of your exports object, thus the warning you receive, because the compiler(babel) didn't find exports.ADDENDUM in your code, only you know that it's there, therefore the compiler thinks you're using an unexisting component.
As of imports, it's the same story, the same type of warning was emitted by webpack when something like require('/path/to/' + someVar + '/some.file.js'), because webpack wanted to make a chunk out of it, but that wasn't a full path for webpack and it couldn't find the file because it was a concatenated string (dynamic import). (i don't know if this changed over the years, but i'm sure you understand/knew this perfectly well too)

Browserify standalone option doesn't directly wraps the code with specified name?

I tried to use gulp, browserify, watchify, and babelify to compile a standalone js module.
The options is like this:
const browserifyOpts = {
debug: true,
entries: path.join('src', 'index.js'),
standalone: 'Goo',
transform: [
'babelify',
],
};
My JS module is as follows:
export default class Goo {
constructor() {
this.a = 'hello';
}
}
It compiles fine. But when I include it in a script tag in a html file, the Goo module is wrapped inside window.Goo.default, that is, I cannot directly use:
new Goo();
but have to use:
new Goo.default();
Any idea where went wrong?
Thanks!

The easiest option would be to wrap this yourself by having your index.js file contain something like
module.exports = require('./main').default;
and move your current index.js to main.js. Then you'll be set.
As the other answer says, you can potentially use babel-plugin-add-module-exports, but that is not something I'd generally recommend because while it fixes this problem, it also introduces the possibility that you could accidentally write import/export pairs that work but are not spec-compliant.

By default, Babel 6 handles default module exports differently. If you want to use the legacy version, you can use the add-module-exports plugin.
Either add that into your .babelrc, or add it as an option in Babelify.
More information from this Github Issue:
has to do with the new way Babel handles default exports. if you dont
want to have to reference the default key, you need to use this
plugin: https://github.com/59naga/babel-plugin-add-module-exports

Cannot use decorators in Node/BabelJS application

I have a Node application, which specifies babel with transform options and register in a main file, like so:
require('babel').transform('code', { stage: 1 });
require('babel/register')({ ignore: false });
require('../src/index');
Which does an excellent job of allowing me to use ES6 in ../src/index, and all subsequent files, but does not seem to allow me to use Decorators, as it should by declaring level 1 transform. I get instead a syntax error. Why is this not enabling decorator support? The actual decorator I'm trying to use is:
#test1
test Class() {
constructor() {
this.test = 'test';
}
}
function test1(obj) {
obj.test1 = 'test1';
}

That's not how you specify options, that first like does nothing. It compiles the JavaScript code code and does nothing with the result of the compilation.
require('babel/register')({
ignore: false,
stage: 1
});
require('../src/index');
Also generally ignore: false is a bad idea because some files should ignored.
Update
If you are using Babel 6, you'll want to download babel-plugin-transform-decorators-legacy rather than enabling stage: 1.

It's worth noting that the newest version of babel (v6) (over 1 month old) does not support decorators and the babeljs team has identified that they do not consider decorators to be a priority to fix -
https://twitter.com/sebmck/status/661501967412301824
As #jdanyow has mentioned in other answers you can track the issue here but beware if you choose to use Babeljs v6 that there is functionality from the previous release which is broken in the released v6 at the moment.
As #loganfsmyth points out in comments there is a plugin available babel-plugin-transform-decorators-legacy although it does mention that there are differences in the implementation, however I am not aware of them.