I try to solve navigation swiper in vue, and I found this article to solve it. However, there's a problem with slot, I know that vue3 has v-slot to replace this function, but I don't know how to write it. Here is the link to the article. https://blog.csdn.net/qq_41838215/article/details/109106235
Version:
vue : 3.2.31
vue-awesome-swiper: 5.0.0
swiper: 6.8.4
eslint: 8.12.0,
<swiper
ref="mySwiper"
:options="swiperOption"
>
<swiper-slide v-for="(img, index) in images" :key="index">
<img :src="require(`#/assets/picture/${img}.jpg`)"/>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev" #click="prev"></div>
<div class="swiper-button-next" slot="button-next" #click="next"></div>
</swiper>
Besides, I found this maybe eslint problem, so I wrote eslint with this article
ionic - `slot` attributes are deprecated - eslint-plugin-vue
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/no-deprecated-slot-attribute': 'off',
"vetur.validation.template": false,
}
}
Thanks for your helping.
Related
So i'm using vue js 3 and vue.config.js.
and this is what i have tried:
configureWebpack: {
optimization: {
minimizer: isProd
? [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true,
},
// sourceMap: true,
// comments: false,
},
}),
]
: [],
},
},
And it's working! But for some reason it doesn't show router-link and what is inside my router link:
<router-link :to="{name: 'project', params: {id: data.id.value}}">
<el-button type="primary">
<i class="fa el-icon-fa-sign-in"></i>
</el-button>
</router-link>
if i remove router link and use
<span>Then it will show my span</span>
Can you help me please to fix issue with the router-link when i'm running UglifyJsPlugin?
Do you know another way how can i remove debugger and console log from Production?
I have installed ESLint + Prettier in my Vuejs project. Saving files causes the prettier to throw the following warning. Much appreciated if someone could explain what causes this warning.
"Replace `·:to=\"{·name:·'About',·query:·{·lang:·$i18n.locale·}·}\"·tag=\"button\">About</router-link` with `⏎········:to=\"{·name:·'About',·query:·{·lang:·$i18n.locale·}·}\"⏎········tag=\"button\"⏎········>About</router-link⏎······`"
The vuejs file:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link>|
<router-link
:to="{ name: 'About', query: { lang: $i18n.locale } }"
tag="button"
>
About
</router-link>
<p>{{ $route.query.lang }}</p>
<h2>{{ $i18n.locale }}</h2>
</div>
<router-view />
</div>
</template>
.prettierrc.js:
module.exports = {
singleQuote: true,
semi: false
}
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '#vue/prettier'],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'prettier/prettier': ['error']
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
The line-wrapping you're observing is done by Prettier's core formatting. You can avoid it by setting the max line width (printWidth) to something longer than 80.
Configure Prettier with:
// <root>/.prettierrc.js
module.exports = {
printWidth: 200, // max number of characters per line (default: 80)
}
And configure ESLint's prettier/prettier options:
// <root>/.eslintrc.js
const prettierOptions = require("./prettierrc");
module.exports = {
rules: {
"prettier/prettier": ["error", prettierOptions],
},
};
I am using Visual Studio Code with prettier for vue, and it is messing up my interpolations. Every time that I save it switches between having the curly braces on the new line with the content, or leaving them on the line with the tags and only putting the content on the new line.
For a while they would swap in unison, so I would just have to make sure it was in the correct state before committing to version control. Now, these two are on opposite cycles and therefore one of them is always wrong.
(I am using Bootstrap-Vue and i18n localization)
Save 1
<b-col>
<b-button type="button" v-on:click="done()">
{{ $t('Done') }}
</b-button>
</b-col>
<b-col>
<b-button type="button" v-on:click="cannotComplete()">{{
$t('CannotComplete')
}}</b-button>
</b-col>
Save 2
<b-row>
<b-col>
<b-button type="button" v-on:click="done()">{{
$t('Done')
}}</b-button>
</b-col>
<b-col>
<b-button type="button" v-on:click="cannotComplete()">
{{ $t('CannotComplete') }}
</b-button>
</b-col>
</b-row>
Prettier Config
module.exports = {
singleQuote: true,
semi: false
}
eslintConfig
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'plugin:prettier/recommended',
'#vue/prettier',
'prettier'
],
plugins: ['prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'prettier/prettier': ['error']
},
parserOptions: {
parser: 'babel-eslint'
}
}
The issue must have been something to do with conflicting formaters. I removed the Prettier plugin and changed some Visual Studio Code settings.
VS Code Settings:
{
...
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true
...
}
eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '#vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
Relevant SO Post
I'm using the eslint-plugin-vue with my Vue project.
I have the following .prettierrc file:
// /.prettierrc
{
"arrowParens": "avoid",
"bracketSpacing": true,
"insertPragma": false,
"jsxBracketSameLine": false,
"printWidth": 80,
"proseWrap": "preserve",
"requirePragma": false,
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false
}
And the following .eslintrc.js file:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/recommended',
'#vue/prettier',
],
rules: {
'linebreak-style': ['error', 'unix'],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/max-attributes-per-line': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'always',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
plugins: ['vue'],
parserOptions: {
parser: 'babel-eslint',
},
}
But unfortunately, prettier thinks that
<template>
<header> Home </header>
</template>
Is prettier than
<template>
<header>
<a href="/" class="logo">
Home
</a>
</header>
</template>
How can I tell prettier to preserve my vertical whitespace in the Vue template?
Are there any rules similar to what I want?
Your only option(workaround) is using ignore.
Ex Js files.
// prettier-ignore
Ex Html files.
<!-- prettier-ignore -->
https://prettier.io/docs/en/ignore.html
Here's the list of rules for vue in eslint: https://vuejs.github.io/eslint-plugin-vue/rules/
But if you disable a rule it will be applied to all your code then.
Also, it seems that you can tell Prettier to ignore a block: https://prettier.io/docs/en/ignore.html#html
Besides, I would argue that this is more 'readable', but that's my point of view :)
<template>
<header>
Home
</header>
</template>
I use render function like this:
.script.js:
methods: {
handleClick(data){
console.log(data)
},
render(h, { node, data, store }) {
return (
<span>
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<a href="javascript:;"
:attr="data.id" #click="handleClick">Edit{data.id}
</a>
</span>
</span>
);
}
}
But babel encoutners error saying the :click has Unexpected token.
.vue:
<template src="./template.html"></template>
<script src="./script.js"></script>
package.json:
"vue": "^2.2.6"
"vue-router": "^2.4.0"
"element-ui": "^1.2.8",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-vue-jsx": "^3.4.2",
"vue-loader": "^11.3.4",
"webpack": "^2.3.1",
webpack:
{
test: /\.vue$/,
loader: `vue-loader`,
options: {
loaders: {
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
loader: `babel-loader`,
exclude: /(node_modules)/
}
.babelrc:
{
"presets": [
["es2015", { "modules": false }], "stage-1", "stage-2", "stage-3"
],
"plugins": [
["transform-vue-jsx"],
["transform-object-assign"],
["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}]]
]
}
When i run gulp dist, babel throws an error like follows:
Namespaced tags/attributes are not supported. JSX is not XML.\nFor attributes like xlink:href, use xlinkHref instead.
As #Bert Evans suggested,
after re-reading the reademe docs of https://github.com/vuejs/babel-plugin-transform-vue-jsx, I figured out that i just wrote the code without understanding the syntax of vue-specific jsx syntax.
As the docs says:
Note that almost all built-in Vue directives are not supported when using JSX, the sole exception being v-show, which can be used with the v-show={value} syntax. In most cases there are obvious programmatic equivalents, for example v-if is just a ternary expression, and v-for is just an array.map() expression, etc.
The equivalent of the above in Vue 2.0 JSX is:
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
So, i changed my code to
render(h, {node,data,store}) {
const link = {
href: `/#/schema-type/${data.id}`
};
return (
<span>
<span>
<span>{node.label}</span>
</span>
<span>
edit
</span>
</span>
);
}
And it works!
Try to write your html as a string:
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
It looks like you are used to React, but it write a little different.