there is vue.js CLI 3 installed with the PWA plugin as well as i18n.

I deleted all the vue.js icon files in /public/ (including the PNGs in /public/img/icons), removed the logo.png file in /src/assets, removed the link(rel=icon) tag in /public/index.html, changed manifest.json to remove any reference to the existing vue.js icon files, cleared my browser cache and yet when loading the page, when still getting these hardcoded link tags in my DOM:

<link rel=”icon” type=”image/png” sizes=”32x32” href=”/img/icons/favicon-32x32.png”>
<link rel=”icon” type=”image/png” sizes=”16x16” href=”/img/icons/favicon-16x16.png”>
<link rel=”apple-touch-icon” href=”/img/icons/apple-touch-icon-152x152.png”>
<link rel=”mask-icon” href=”/img/icons/safari-pinned-tab.svg” color=”#4DBA87”>
<meta name=”msapplication-TileImage” content=”/img/icons/msapplication-icon-144x144.png”>

None of these files exist and none of them are referenced anywhere in my project. The weirdest thing about this is that the default vue.js favicon is still being displayed in any browser I use, even after deleting ALL the files, so it’s definitely not a client-side cache thing.

How can I remove these?

Solution :

I just figured out that I needed to edit my vue.config.js and add something like:

pwa: {
name: ‘Test’,
iconPaths: {
favicon32: ‘(any icon file here)’,
favicon16: ‘(any icon file here)’,
appleTouchIcon: ‘(any icon file here)’,
maskIcon: ‘(any icon file here)’,
msTileImage: ‘(any icon file here)’
}
}

to override the default settings (see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa)

I need to delete one doc from firebase by clicking on it’s icon. The problem is I dont’t know how to tag the specific id of each doc in vuetify

this is my card (1 card for 1 project)

<v-card flat v-for=”project in projects” :key=”project.title”>
<v-layout row wrap :class=”`pa-3 project ${project.status}`“>
<v-flex xs12 md6>
<div class=”caption grey–text”>Project title</div>
<div>{ project.title }</div>
</v-flex>
<v-flex xs6 sm4 md2>
<div class=”caption grey–text”>Person</div>
<div>{ project.person }</div>
</v-flex>
<v-flex xs6 sm4 md2>
<div class=”caption grey–text”>Due by</div>
<div>{ project.due }</div>
</v-flex>
<v-flex xs2 sm4 md2>
<v-btn flat color=’red’ slot=’activator’ class=’right mx-0 my-0’ @click=’deleteProject()’>
<v-icon>delete</v-icon>
</v-btn>
<div>
<v-chip small :class=”`${project.status} white–text caption mx-0`“>{ project.status}</v-chip>
</div>
</v-flex>
</v-layout>
<v-divider></v-divider>
</v-card>

And this method I try to write

deleteProject() {
console.log(‘deleted’);
let idP = element.id; // obviously that there is problem with this line
db.collection(‘projects’).doc(idP).delete()
}

Solution :

Welcome to SO!

You need to use remove() method instead of delete() to delete document from firebase.

If you want to delete particular children then use it like below.

doc(idP).child().remove()

Hope this helps!

Solution 2:

I think you are fetching projects from firebase and you will always get an Id for firebase document you are fetching. You should store that id with rest of the values. After that when you are calling the deleteProject function you can pass the Id in that function like this.

<v-btn flat color=’red’ slot=’activator’ class=’right mx-0 my-0’ @click=’deleteProject(project.Id)’>

And than receive the Id in the function like this

deleteProject(Id) {
console.log(‘deleted’);
db.collection(‘projects’).doc(Id).delete()
}

Hopefully, this will solve the problem.

there is this CSS part for my site:

*{
height: 100%;
width: 100%;
margin: 0;

}
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

.grid div:nth-child(odd){
border: black 2px solid;
}

.grid div:nth-child(even){
border: black 2px solid;
}

And to have four boxes, but it just creates a new box for each HTML tag, instead of placing it in the corresponding box, as you can see here.

The low poly part of the screenshot is the visible part and the four boxes are the boxes which should contain the content

Here is the template: Click

Solution :

Put the height and width specifications on the grid itself, and it should behave more as expected.

* {
margin: 0;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 100vh;
width: 100vw;
}

.grid div:nth-child(odd) {
border: black 2px solid;
}

.grid div:nth-child(even) {
border: black 2px solid;
}

Solution 2:

The problem is you’re applying height: 100% to every single element in the code.

* {
height: 100%;
width: 100%;
margin: 0;
}

This forces all elements to take 100% of the parent, and block elements stack vertically.

You don’t need to do this. It’s overkill.

Remove the code above and just add this:

body {
margin: 0;
}

.grid {
height: 100vh;
}

How the best way to re-render v-for in my application when I change/move to another route in vue.js js?

In my case I use vuex, vuex-persistedstate and moment for save localStorage and show a moment ago time.

But how to use rerender v-for without data changes from my API and reload page manual?

If you see

Recent Activity data always cache in localStorage. But if no new data from api, how to make this always become 3 minutes ago then 4 minutes ago etc….

It happend only if I reload the page. Because my code like

<template>
<div class=”widget”>
<h4 class=”widget-title”>Recent Activity</h4>
<ul class=”activitiez”>
<li v-for=”act in recentActivity” :key=”act._id” :id=”act._id”>
<div class=”activity-meta”>
<i v-html=”convertToMoment(act.created_at)”></i>
<span v-html=”act.activity”></span>
<h6>by <a href=”#” v-html=”act.sent_name”></a></h6>
</div>
</li>
</ul>
</div>
</template>

<script>
import {mapGetters, mapActions} from “vuex”

export default {
created() {
this.fetchRecentActivityData()
},
computed: {
…mapGetters([“recentActivity”])
},
methods: {
…mapActions([“fetchRecentActivityData”]),
convertToMoment(data) {
return moment(data).fromNow()
}
},
}
</script>

<style>

</style>

and my store code

import axios from ‘axios’;

const state = {
recentActivityStore: [],
errorBag: null,
timingStore: Date.now()
};

const getters = {
recentActivity: state => state.recentActivityStore,
recentActivityTiming: state => state.timingStore
};

const actions = {
async fetchRecentActivityData({ commit }) {
const recentAct = this.state.recentactivity.recentActivityStore
if(_.isEmpty(recentAct)) {
const response = await axios.get(‘/recent/activity’)
commit(‘UPDATE_RECENT_ACTIVITY’, response.data)
}
commit(‘UPDATE_TIMING’, Date.now())
}
};

const mutations = {
UPDATE_RECENT_ACTIVITY: (state, data) => {
state.recentActivityStore = data
},
UPDATE_TIMING: (state, data) => {
state.timingStore = data
}
};

export default {
state,
getters,
actions,
mutations
};

How to make my v-for reload without refresh page manual? Then 3 minutes ago then 4 minutes ago happened

Thanks

Solution :

Codepen : https://codepen.io/anon/pen/qvgxRJ

To solve this create a vue.js filter

filters: {
timeago: function (pdate, ctime) {
if (!pdate || !ctime) return ‘’
return moment(pdate).from(ctime)
}
},

apply this filter in HTML

<i>{act.created_at | timeago(currenttime)}</i>

It calculates the time ago based on current time. Then in setInterval update the currenttime every 50 seconds. It will update the component every 50 seconds.

data:()=>({
currenttime: Date.now(),
timer: ‘’
}),
created() {
this.fetchRecentActivityData()
this.timer = setInterval(() => {this.currenttime = Date.now()}, 50000);
}

Final Code.

export default {
data:()=>({
currenttime: Date.now(),
timer: ‘’
}),
filters: {
timeago: function (pdate, ctime) {
if (!pdate || !ctime) return ‘’
return moment(pdate).from(ctime)
}
},
created() {
this.fetchRecentActivityData()
this.timer = setInterval(() => {this.currenttime = Date.now()}, 50000);
},
beforeDestroy() {
clearInterval(this.timer)
},
computed: {
…mapGetters([“recentActivity”])
},
methods: {
…mapActions([“fetchRecentActivityData”]),
},
}

in HTML

<li v-for=”act in recentActivity” :key=”act._id” :id=”act._id”>
<div class=”activity-meta”>
<i>{act.created_at | timeago(currenttime)}</i>
<span v-html=”act.activity”></span>
<h6>by <a href=”#” v-html=”act.sent_name”></a></h6>
</div>
</li>

when trying to show some table data in view using vue.js js and laravel :
here is what there is tried :
this is comment controller :

public function index()
{
$comment = Comment::Latest()->paginate(10);
return new CommentResource($comment);
}

here is my vue.js js comment script

export default {
data: function() {
return {
comments: {}
}
},
created() {
this.loadComments();
}
,
methods: {
loadComments(){
axios.get(“../api/comment”).then(
({ data })=>(this.comments - data.data)
// response => this.comments = response.data
);
},
}
}

and finally the html part of vue.js html

<div v-for=”comment in comments” >
{ comment.title }
</div>

the result is this error i get in browser :

[vue.js warn]: Error in render: “TypeError: Cannot read property ‘title’ of undefined”

and here

[vue.js warn]: Property or method “comment” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

and

TypeError: Cannot read property ‘title’ of undefined

btw when sure that there is this because this is my api that i recice on
http://localhost:8000/api/comment

{“current_page”:1,”data”:[{“id”:1,”title”:”asd”,”body”:”asd”,”user_id”:1,”user_email”:”asd”,”status”:1,”created_at”:null,”updated_at”:null}],”first_page_url”:”http:\/\/localhost:8000\/api\/comment?page=1”,”from”:1,”last_page”:1,”last_page_url”:”http:\/\/localhost:8000\/api\/comment?page=1”,”next_page_url”:null,”path”:”http:\/\/localhost:8000\/api\/comment”,”per_page”:10,”prev_page_url”:null,”to”:1,”total”:1}

and when i console log this :

axios.get(“../api/comment”).then(({ data }) => (console.log(data)))

i get this result :

Solution :

You’re already extracting data from the response. So either you use the response object like this :

axios.get(“../api/comment”).then((response) => (this.comments = response.data.data)));

Or you extract the data property and use it.

axios.get(“../api/comment”).then(({ data }) => (this.comments = data.data)));

This is because axios returns a response object that has a data property that contains the server response. As the server response also has a data property that you want to use, you want to use response.data.data

i’m trying to do mini shop app in VueJS without backend, only adding items to shopping cart.

there is component One(Nmdgrey.vue), where there is e.g. boots and “Add to cart” button.

<button @click=”addToCart”>Add to cart</button>

And function in first component:

methods: {
addToCart() {
const boots = { name: ‘adidas nmd’ };
this.cart.push(boots);

}
}

And there is component Two, where there is shopping cart

<div v-for=”item in cart”>
{item.name}
</div>

And JS

import Nmdgrey from ‘@/components/Nmdgrey.vue’;
export default {
name: ‘Shoppingcart’,
components:
Nmdgrey,
data() {
return {
cart: [
{ name: ‘adidas adizero’ },
]
}
},
};

How i can add boots from component One to list in component Two?

there is this.cart.push(boots); in component One but it didn’t work

This is what but button didn’t work: codesandbox

Solution :

From the post I’ve deduced that what you want to do is to share data from two or more vue.js components. For this purpose, you could use Vuex, which provides centralized state management.

This way you could use a vuex mutation to add items to the cart, which could be used from any component. You would also be able to retrieve the cart data from any of them by using vuex getters.

Solution 2:

Use $emit, when child components need to communicate with parent.

Refer official doc:Listening-to-Child-Components-Events

Nmdgrey.vue

<template>
<div>
<!– component 1 –>
<button @click=”add”>Add to cart</button>
</div>
</template>

<script>
export default {
name: “Numdgrey”,
methods: {
add() {
const boots = { name: “adidas nmd” };
this.$emit(“add”, boots);
}
}
};
</script>

Shoppingcart.vue

<template>
<div>
<!– component 2 –>
<nmdgrey @add=”addCart”></nmdgrey>
<br>
<div v-for=”(item, index) in cart” :key=”index”>{item.name}</div>
</div>
</template>

<script>
import Nmdgrey from “./Nmdgrey.vue”;
export default {
name: “ShoppingCart”,
components: {
Nmdgrey
},
data() {
return {
cart: [{ name: “adidas adizero” }]
};
},
methods: {
addCart(good) {
this.cart.push(good);
}
}
};
</script>

Codesandbox demo : https://codesandbox.io/s/z2qz6oy8yp

Solution 3:

you need to create a post method where you take over everything you need from one page to another page. after that everything will get into the cart and you will be able to create the page.

Solution 4:

Codesandbox demo : https://codesandbox.io/s/94l44j8j14

Use props to pass the values to cart component.

Nmdgrey.vue

<template>
<div>
<b>Component 1 : NmdGrey</b><br><br>
<button v-for=”(product, index) in boots” :key=”index”
@click=”addToCart(product.name)” >Add {product.name} to Cart</button>
<br><br><hr><br>
<shoppingcart :cart=”cart” />
</div>
</template>

<script>
import shoppingcart from ‘./shoppingcart.vue’;
export default {
name: ‘Nmdgrey’,
components:{shoppingcart},
data() {
return {
boots:[{name: ‘adidas adizero’}, {name: ‘puma walker’}, {name: ‘nike shoe’}, {name: ‘adidas plain’}],
cart:[],
}
},
methods: {
addToCart(boots) {
this.cart.push({ name: boots });

}
}

}
</script>

Shoppingcart.vue

<template>
<div>
<b>Component 2 : Shopping cart</b>
<br>
<br>
<div v-for=”(product, index) in cart” :key=”index”>{product.name}</div>
</div>
</template>

<script>
export default {
name: “Shoppingcart”,
props: [“cart”],
data() {
return {};
}
};
</script>

Solution 5:

Well, If the application is small, then you can create vue.js mixins for addToCart and call it whenever you’ll require in the component.

Similar to the methods, you can share data across the components with the use of mixins.

Here is the mixins official docs

Here is the working JsFiddle

Hope this helps!

I’m currently using Nuxt and I created a central ApiClient in my app using axios.

services/apiClient.js

import axios from “axios”;
import store from ‘../store/index’;

const token = () => {
return store().getters.getToken;
};

const axiosClient = axios.create({
baseURL: “this-is-a-url”,
headers: {
Accept: ‘application/json’,
‘Content-Type’: ‘application/json’,
‘X-Api-Key’: token() // this returns error: Object(…) is not a function from Vuex
}
});

axiosClient.interceptors.request.use(function (config) {
console.log(token()); // this prints the token type string
return config;
}, function (error) {
return Promise.reject(error);
});

When I use the token() in axios headers, I’m getting the error:
Uncaught TypeError: Object(…) but when I call it from axios interceptor I’m getting the correct token type String.

store/index.js

import Vuex from ‘vuex’;
import * as sessions from ‘./modules/sessions’;

const store = () => {
return new Vuex.Store({
getters: {
isAuthenticated() {
return sessions.state.token != null;
}
},
modules: {
sessions
}
});
};

export default store;

store/modules/sessions.js

import axios from ‘axios’;

export const state = {
token: localStorage.getItem(‘token’) || null,
};

export const mutations = {
SET_TOKEN(state, token) {
state.token = token;
}
};

export const actions = {
login({ commit }) {
return new Promise((resolve, reject) => {
axios.get(`/retrieveKey`)
.then(response => {
localStorage.setItem(‘token’, response.data.value);
commit(‘SET_TOKEN’, response.data.value);
resolve(response.data);
})
.catch(error => {
reject(error);
});
});
},
logout({ commit }, context) {
localStorage.removeItem(‘token’);
window.location.reload();
}
};

export const getters = {
getToken(state) {
return state.token;
}
};

Solution :

Refer to Getters of Vuex guide, the getters will be exposed on the store.getters object, and you access values as properties.

May be you can get the token value via store.getters.getToken instead of store().getters.getToken?

i set a property in window Object for using it globally, like this:

window.configs.foo=true;

but when use it like this:

<v-btn v-if=”window.configs.foo”>go</v-btn>

in console, i get this error:

[vue.js warn]: Property or method “window” is not defined on the instance
but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property.

how i can use window object in vueJs template?

Solution :

Well, Alternate is to use $root in Vue. Define foo at the vue.js instance and it will be available in all the component with this.$root.foo.

Here is the official docs

Hope this helps

Solution 2:

Because v-if is intended to be used on properties of the component. You cannot v-if over variables in global scope, or outside the component data or properties.

What you can do, instead, if to setup a computed property on the component that targets window.configs.foo:

new Vue({ // or maybe a component, this depend on how you’re using it
template: `<div>
<v-btn v-if=”showMyButton”>…</v-btn>
</div>`
computed: {
showMyButton() {
return window.configs && window.configs.foo;
}
}
})

UPDATE:

If you have to reuse this in a lot of sites, there are two things that you can do:

Vuex

Using vuex to set the showMyButton as a vuex state. Then you can access it via:

v-if=”$store.state.showMyButton”

And you can modify it via standard vuex mutations.

Mixins

Maybe for some reason you don’t want to use vuex. Then a way to reuse logic across many components is to use mixins.

const configAwareMixin = {
computed: {
showButton() {
return window.configs.foo;
}
}
}

// And then in the component:

Vue.component(‘stuff’, {
mixins: [buttonAwareMixin],
template: `<div><v-btn v-if=”showButton”></v-btn></div>`
})

I use SVG map of Austria. Each province has “title” attribute which contains a name of the province.

[full example available in the snippet below]

Outside the map in my HTML there is a paragraph, where to display the name of the province that was clicked by the user.

{ province }

How can I achieve that?

Here is my snippet with my code:
https://mdbootstrap.com/snippets/jquery/marektchas/500840?view=project

Solution :

If you can change the svg part you can add a click event on each path:

<path @click=”setProvince(‘Burgenland’)” id=”AT-1” title=”Burgenland” class=”land” d=”…” />

And add a method in the script:

methods: {
setProvince (title) {
this.province = title
}
}

Updated answer

If you have a lot of provinces, you can add the click event on mounted by selecting all the <path> selectors (or class name or any selector you find relevant for the case):

new Vue({
el: ‘#app’,
data: {
province: null
},
mounted () {
this.addClickHandler()
},
methods: {
setProvince (title) {
this.province = title
},
addClickHandler () {
let paths = this.$el.querySelectorAll(‘path’)
paths.forEach(el => {
let title = el.attributes.title.value
el.addEventListener(‘click’, () => {
this.setProvince(title)
})
})
}
}
});

There’s no need of @click in template anymore this way.
Live example here

Solution 2:

You need to learn about event delegation. You should be able to attach an event handler to the svg root and get events for any element inside the svg

https://recursive.codes/blog/post/34

https://jqfundamentals.com/chapter/events

I created new project with vue-cli and to use global scss files in my projects to apply global styles. Also to use font-families without importing scss file in every component where to use it

I found lots of solutions, but none of them help me. I’m new with webpack, so it is hard to understand what exactly goes wrong.
I install loader npm install sass-loader node-sass –save-dev and try to do lots of things with webpack

webpack.config.js

var path = require(‘path’)
var webpack = require(‘webpack’)

module.exports = {
entry: ‘./src/main.js’,
output: {
path: path.resolve(__dirname, ‘./dist’),
publicPath: ‘/dist/‘,
filename: ‘build.js’
},
module: {
rules: [
{
test: /\.css$/,
use: [
‘vue-style-loader’,
‘css-loader’
],
},
{
test: /\.scss$/,
use: [
‘vue-style-loader’,
‘css-loader’,
‘sass-loader’
],
},
{
test: /\.sass$/,
use: [
‘vue-style-loader’,
‘css-loader’,
‘sass-loader?indentedSyntax’
],
},
{
test: /\.vue$/,
loader: ‘vue-loader’,
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the “scss” and “sass” values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
‘scss’: [
‘vue-style-loader’,
‘css-loader’,
‘sass-loader’
],
‘sass’: [
‘vue-style-loader’,
‘css-loader’,
‘sass-loader?indentedSyntax’
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: ‘babel-loader’,
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: ‘file-loader’,
options: {
name: ‘[name].[ext]?[hash]‘
}
}
]
},
resolve: {
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’
},
extensions: [‘*‘, ‘.js’, ‘.vue’, ‘.json’]
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: ‘#eval-source-map’
}

if (process.env.NODE_ENV === ‘production’) {
module.exports.devtool = ‘#source-map’
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
‘process.env’: {
NODE_ENV: ‘“production”‘
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

src/assets/scss/fonts.scss

@font-face {
font-family: “SuisseIntl”;
src: url(“../fonts/SuisseIntl.woff”) format(“woff”);
}
@font-face {
font-family: “SuisseIntl-Light”;
src: url(“../fonts/SuisseIntl-Light.woff”) format(“woff”);
}
@font-face {
font-family: “SuisseIntl-SemiBold”;
src: url(“../fonts/SuisseIntl-SemiBold.woff”) format(“woff”);
}

$body-bg: red;

to be able to use font families in style tag inside every component and to be able to import scss files to component like this@import ‘../assets/scss/fonts’; , but now this cause error.
Can someone help me, please? What should I do to make it work?

Solution :

To use scss in components, make sure you have both sass-loader and node-sass installed as dev dependencies. This will allow you to use scss styling in components with:

<style lang=”scss”>
</style>

If you want to include some actual styling (something like the fonts that creates actual styling lines in css), create a scss file and include it in the top-most vue.js file (by default something like App.vue).

@import “./some/relative/path/to/your/scss/file.scss”;

If you want to include variables, functions or mixins in every component without explicitly having to define the import, make a scss file that serves as the entry point for such configuration, e.g. /scss/config.scss. Make sure that you do not output ANY css rules in this file, because these css rules would be duplicated many times for each component. Instead use the file I mentioned before and import the configuration in there as well.

Then, go to the vue.config.js file and add the following to the object:

css: {
loaderOptions: {
sass: {
data: `
@import “@/scss/config.scss”;
`
}
}
}

This will automatically load the config file. If you are still using the old structure, you can get the same behaviour by adding a data option to the own sass-loader:

{
test: /\.scss$/,
use: [
‘vue-style-loader’,
‘css-loader’,
{
loader: ‘sass-loader’,
options: {
data: ‘@import “config”;’,
includePaths: [
path.join(__dirname, ‘src/scss’) // Or however else you get to the scss folder
]
}
}
],
},