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?
Related
For some reason the imageURL property is not working, even though the url is correct, with the v-bind:src attribute.
The template:
<div v-for="project in projects" :key="project.id">
<section class="project-wrapper">
<img :src="project.imageURL" alt="Project image"/> //THE PROBLEM
<h1>{{ project.title }}</h1>
<p>{{ project.about }}</p>
<router-link :to="{ name: project.routeName }" class="type-two-link">ver projeto</router-link>
</section>
</div>
The script:
data() {
return {
projects: [
{
id: this.projectId,
title: "Minimalist Portfolio",
about: "...",
imageURL: "./minimalist-porfolio-desktop.png", //THE PROBLEM
routeName: "Minimalist Portfolio",
},
],
};
},
What am I doing wrong?
Any help is welcome.
I've tried to use 'required()' in the template, but it didn't worked.
So, this is how I solved it:
data() {
return {
projects: [
{
"...",
imageURL: require("../../assets/images/projects/minimalist-portfolio/minimalist-porfolio-desktop.png"),
routeSlugName: "My Portfolio",
},
],
};
},
,
You can learn more here: Static image src in Vue.js template
I am trying to create a side menu (Dashboard's side menu with content) and I have to use multiple router-view.
First router-view is in App.vue that contains all the component.
<div id="app">
<router-view></router-view>
</div>
and the second router-view exists within above router-view as:
<div class="dashboard">
<Sidebar />
<div class="content">
<router-view name="content"></router-view>
</div>
</div>
According to below router/index.js code, if user visits / link, he will be redirected to dashboard page.
const routes = [
{
path: "",
name: "Dashboard",
component: dashboard,
},
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
{
path: "/profile",
name: "Profile",
components: {
content: Profile,
},
},
{
path: "/settings",
name: "Settings",
components: {
content: Settings,
},
},
{
path: "/dashboard",
name: "Overview",
components: {
content: Overview,
},
},
];
and within above Sidebar component, there're links that upon clicking it shows the content of that link on right side (as in dashboard):
<div class="sidebar">
<div class="title">
Simple Sidebar
</div>
<div class="menu-items">
<router-link to="" active-class="active" tag="button" exact class="side-btn">
<div class="link-container">
Overview
</div>
</router-link>
<router-link to="/messages" active-class="active" tag="button" exact class="side-btn">
<div class="link-container">
Messages
</div>
</router-link>
// ....
</div>
</div>
for the second router-view I added a name as :
<router-view name="content"></router-view>
and then I identified it in router/index.js as:
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
but it didn't work.
Can anyone help me debug and solve this issue, thank you in advance.
The nested route requires children route configs, which is missing from Dashboard's route config.
Move the route config of Messages into Dashboard's children array:
const routes = [
{
path: "",
name: "Dashboard",
component: dashboard,
children: [
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
]
},
//...
]
I have a problem with add meta information from graphql to vue-meta.
how to from external about.gql information add to vue-meta?
Adding one more gql query I would like to avoid. So I am not so experienced with Vue and Apollo and any help will be good!
Thanks a lot!
about.vue
<ApolloQuery :query="require('../graphql/about.gql')">
<template slot-scope="{ result: { loading, data } }">
<div v-if="loading">Loading...</div>
<div class="" v-if="data">
<div class="row">
<div class="col-xs-12">
<div class="p40" v-html="data.pageBy.content"></div>
</div>
</div>
</div>
</template>
</ApolloQuery>
<script>
export default {
data: () => ({
loading: 0,
error: null,
}),
metaInfo: {
// title will be injected into parent titleTemplate
title: 'About',
meta: [
{
name: 'description',
content:
'Epiloge is about connecting in your field of interest. Our vision is to help people share their knowledge, work, projects, papers and ideas and build their network through what they do rather where they live, study or work.'
},
{
property: 'og:title',
content: 'Epiloge - Build your network in your field of interest'
},
{ property: 'og:site_name', content: 'Epiloge' },
{ property: 'og:type', content: 'website' },
{ name: 'robots', content: 'index,follow' }
]
}
}
</script>
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'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>