[FIXED] How to use font icons in offline?

Issue

I'm currently using vuetify in my laravel app and it's working fine.

The vuetify is using material-design-icons based on this link, below codes they use these two links:

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

Now my question is how to do this in an offline way(just the font icons)? Is there an npm that we could use, and how to? Please help guys.

Solution

You can install through npm using npm install @mdi/font -D. Check for more info Install Material Design Icons

Answered By - Senthurkumaran

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More

[FIXED] How to install and get started with Vuetify and Vue.js 3

Issue

Where can I find the new Vuetify version documentation that's compatible with Vue.js 3 and how do I install it and setup it using Vue cli :

In vue 2 we do :

vue create project-name

then :

vue add vuetify

How can we do that with Vue 3?

Solution

Before proceeding, it is important to note that this installation is intended primarily for testing purposes, and should not be considered for production applications.

You could follow the new documentation here and You could setup it as follows :

Create new vue project :

VUE CLI

vue create project-name

VITE

npm create vite project-name --template vue

Then change directory to the new created project to add vuetify

cd project-name

then

vue add vuetify

this changes the main.js file to :

import { createApp } from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'

const app = createApp(App)
app.use(vuetify)

app.mount('#app')

./plugins/vuetify

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

export default createVuetify({
  components,
  directives,
})

You could fork this repository to get started

Answered By - Boussadjra Brahim

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] How to import custom svg icons in vuetify 3?

Issue

How to import custom svg icons in vuetify3 and nuxt3?

In vuetify 2, we were able to directly import svg icons like this

import customIcon from './myIcon.vue'
Vue.use(Vuetify)
export default new Vuetify({
  icons: {
    iconfont: 'mdi',
    values: {
      myIcon: {component: customIcon}
    },
  },
})

---------------

// Used like this in vue file
<v-icon>$myIcon</v-icon>

From veutfiy 3 documentation, I am confused about importing custom svg icons as it is using sets instead of values. https://next.vuetifyjs.com/en/features/icon-fonts/

// plugins/vuetify.js
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";
export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      aliases,
      sets: {
        mdi,
      },
    },
  });
  nuxtApp.vueApp.use(vuetify);
});

Solution

Found a way to use both mdi and custom svg icons

Icon file

//tickicon.vue
<template>
<svg>... icon here</svg>
<template>

//customSvgs.ts
import { h } from "vue";
import type { IconSet, IconProps } from "vuetify";
import tickIcon from "./customSVGs/tickicon.vue";
import closeIcon from "./customSVGs/close-icon.vue";

const customSvgNameToComponent: any = {
  tickIcon,
  closeIcon,
};

const customSVGs: IconSet = {
  component: (props: IconProps) => h(customSvgNameToComponent[props.icon]),
};

export { customSVGs /* aliases */ };

And my vuetify plugin file

// plugins/vuetify.ts
import { createVuetify } from "vuetify";
import { mdi } from "vuetify/iconsets/mdi";
import { customSVGs } from "~~/assets/customSVGs";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      sets: {
        mdi,
        custom: customSVGs,
      },
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

Using like that in vue file

<v-icon icon="custom:tickIcon"/> //Custom SVG Icon 
<v-icon icon="mdi-arrow-up"/>  //default mdi icon

Answered By - Rookie Coder

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

Read More

[FIXED] how to validate both input fields when one updates

Issue

I am trying to validate both input fields when one changes its value. This is required because otherwise the validation between those two fields would not work properly.

I created an example to reproduce the problem, the html code should be self explanatory

<div id="app">
  <v-app id="inspire">
          <v-text-field
              :value="values[0]"
              :rules="firstRules"
              @input="setFirstValue"
            ></v-text-field>

            <v-text-field
              :value="values[1]"
              :rules="secondRules"
              @input="setSecondValue"
            ></v-text-field>
  </v-app>
</div>

It is important to note that a v-model is not possible because this component takes in the values as a prop and passes the updated values back to the parent via emitting update events.

The vue instance:

new Vue({
  el: '#app',
  data () {
    return {
      values: [5345, 11],
      firstRules: [true],
      secondRules: [true]
    }
  },
  created: function () {
    this.setFirstValue(this.values[0])
    this.setSecondValue(this.values[1])
  },
  computed: {
    firstValidation: function () {
      return [value => value.length < this.values[1].length || "Must have less characters than second value"]
    },
    secondValidation: function () {
      return [value => value.length > this.values[0].length || "Must have more characters than first value"]
    }
  },
  methods: {
    setFirstValue: function (newValue) {
      this.values[0] = newValue
      this.firstRules = this.validateValue(this.values[0], this.firstValidation)
      this.secondRules = this.validateValue(this.values[1], this.secondValidation)
    },
    setSecondValue: function (newValue) {
      this.values[1] = newValue
      this.secondRules = this.validateValue(this.values[1], this.secondValidation)
      this.firstRules = this.validateValue(this.values[0], this.firstValidation)
    },
    validateValue: function (value, rules) {
      for (const rule of rules) {
          const result = rule(value)

          if (typeof result === 'string') {
            return [result]
          }
      }

      return [true]
    }
  }
})

On "start" the rules return a valid state but I want to validate both fields when loading the component (created hook?) to update this state immediately.

I have to put the validation rules to the computed properties because they have to access the current values. Otherwise they would validate old values.

Each input event will validate both fields and updates the rules state.

I created an example to play around here

https://codepen.io/anon/pen/OeKVME?editors=1010

Unfortunately two problems come up:

• The fields are not validated directly at the beginning
• when changing one input field to a valid state the rules will still return an error message

How can I setup a validation for both fields when one field updates?

Solution

Seems like you're overthinking things.

By default, a vuetify input's validation logic only triggers when the value bound to that input changes. In order to trigger the validation for the other input, you can wrap both inputs in a v-form component and give it a ref attribute. That way, you'll have access to that component's validate method, which will trigger the validation logic for any inputs inside the form.

The template would look something like this:

<v-form ref="form">
  <v-text .../>
  <v-text .../>
</v-form>

And to trigger the validation in your script:

mounted() {
  this.$refs.form.validate();
}

The above will validate the form when the component is mounted, but you'll also need to trigger the validation for both inputs whenever either input's value changes. For this, you can add a watcher to values. However, you'll need to call the form's validate method after Vue has updated the DOM to reflect the change in values.

To do this, either wrap the call in a this.$nextTick call:

watch: {
  values() {
    this.$nextTick(() => {
      this.$refs.form.validate();
    });
  }
}

Or use an async function and await this.$nextTick:

watch: {
  async values() {
    await this.$nextTick();
    this.$refs.form.validate();
  }
}

So now validation will trigger for both inputs when the component is initialized and whenever either value changes. However, if you prefer to keep the validation call in one spot instead of in both the mounted hook and the values watcher, you can make the watcher immediate and get rid of the call in the mounted hook.

So here's the final example:

watch: {
  immediate: true,
  async handler() {
    await this.$nextTick();
    this.$refs.form.validate();
  }
}

---

So now the validation logic is triggering when it would be expected to, but there is still one issue with your validation logic. When your component initializes, the values data property is set to an array of Number type values, which don't have a length property. So if, for example, you changed just the first input to "5" and the second input was still 11, then (11).length is undefined and "5".length < undefined is false.

Anyways, you'll need to change the values you're comparing to strings before comparing their lengths. Something like this:

value => (value + '').length < (this.values[1] + '').length

---

Finally, because you are able to dynamically call validate on the form, there's an opportunity to reduce much of the complexity of your component.

Here's a simplified version:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      values: [5345, 11]
    }
  },
  computed: {
    rules() {
      const valid = (this.values[0] + '').length < (this.values[1] + '').length;
      return {
        first: [() => valid || "Must have less characters than second value"], 
        second: [() => valid || "Must have more characters than first value"]
      };
    }
  },
  watch: {
    values: {
      immediate: true,
      async handler() {
        await this.$nextTick();
        this.$refs.form.validate();
      }
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-form ref="form">
      <v-text-field v-model="values[0]" :rules="rules.first"></v-text-field>
      <v-text-field v-model="values[1]" :rules="rules.second"></v-text-field>
    </v-form>
  </v-app>
</div>

Answered By - thanksd

Answer Checked By - Terry (PHPFixing Volunteer)

Read More

[FIXED] How to fetch data from object in axios vue

Issue

This is my code.

export default {
 components: {
    draggable,
},
data() {
return {
  ethPrice: null,
 };
},
mounted() {
 axios
  .get(
    "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd"      
   )
  .then((response) => (this.ethPrice = response.data));

And the response is

{ "ethereum": { "usd": 2037.4 } }

This is the template i did.

<v-card-text>{{ ethPrice }}</v-card-text>

How I can get inside "ethereum" and then inside "usd" and fetch only the value?

Solution

setup your data like

  ethPrice: {ethereum{usd:""}}

you need to set it so it remains reactive

.then((response) => (this.$set(this.ethPrice,response.data)));

and then access it like

{{ethPrice.ethereum.usd}}

check the Vue 2 guide on reactivity https://v2.vuejs.org/v2/guide/reactivity.html for a more detailed discussion

Answered By - Keith Nicholas

Answer Checked By - Robin (PHPFixing Admin)

Read More

[FIXED] How to use Vuetify's data tables with custom date sort without breaking the grouping

Issue

I'm using vuetify's data tables component to display objects of this schema:

{ date: '2021-12-23T11:12:18.669Z', type: 0, name: 'Meter-234452', temperature: '46', param_value: '23', floor_temp: '23' },

But in my mounted hook I'm overriding the date field to format it as requested by the product owner:

...
moment(date).format('DD.MM.YYYY HH.mm')

I am also grouping the data by the "name" field which works perfectly fine. But sorting the data by date does not work at all, it will only sort it by the day which makes sense.

I tried to specify a custom function in the custom-sort prop of the component as follows:

customSort (items, sortBy, sortDesc, locale) {
      const activeSortColumn = sortBy[0]
      const activeSortDesc = sortDesc[0]
      items.sort((a, b) => {
        if (activeSortColumn === 'date') {
          const dateA = moment(a.date, 'DD.MM.YYYY HH.mm').toDate()
          const dateB = moment(b.date, 'DD.MM.YYYY HH.mm').toDate()
          return activeSortDesc ? dateA - dateB : dateB - dateA
        }
        return activeSortDesc ? ('' + a[activeSortColumn]).localeCompare(b[activeSortColumn]) : ('' + b[activeSortColumn]).localeCompare(a[activeSortColumn])
      })
      return items
    },

This does work perfectly fine if I don't use grouping, but if I'm grouping and specifying this custom sort function, it'll look like this:

The sorting is still correct, but it also changed the grouping, which kinda makes sense, too. I suppose that it's being sorted and then grouped which causes it to create duplicate groups.

I'm unsure how to solve this, since I'd like to keep the grouping, but also have to provide correct sorting for the date format and all the other columns at once. I noticed that the sortBy parameter will be an array that includes the grouped field aswell if that is being used, so I thought about maybe sorting the data array twice could help?

I appreciate any help!

Solution

I now solved it with a workaround by setting the sort property of the table header to be sorted. It was rather tricky to find this, so in case anyone else runs into this issue, check out the table header example of the v-data-table API.

I used that to specify a separate sort function just for this table header like this:

customSort (a, b) {
  return moment(a, this.tableDateFormat).toDate() - moment(b, this.tableDateFormat).toDate()
},

Will work with plain JavaScript dates aswell, but we are using moment for the rest of our project, too.

Answered By - Blade

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More

[FIXED] How to set multiple conditions inside of the :disabled property in vuetify?

Issue

I am working on a feature to allow users to upload files. I need to disable the 'Add file' button when

1) the field is empty

2) when the file size exceeds 100MB

This is the button:

<v-btn rounded :disabled="!uploadedFiles || fileSizeValidation" @click="confirmFileAdd">Add</v-btn>

This is what is inside of data:

    data: () => ({
    uploadedFiles: null,
    fileSizeValidation: [
        files => !files || !files.some(file => file.size > 100000000) || 'File size should be less than 100 MB!'
    ],
}),

Using either

:disabled="!uploadedFiles || fileSizeValidation" or :disabled="!uploadedFiles && fileSizeValidation"

unfortunately does not work.

|| actually yields an error:

How can I make sure the button is disabled for both conditions?

Solution

You can use a computed property. This property will recompute every time uploadedFiles changes.

  computed: {
    fileSizeValidation() {
      return (
        !this.uploadedFiles ||
        this.uploadedFiles.length <= 0 ||
        this.uploadedFiles.some(file => !file.size ||file.size > 100000000)
      );
    }
  }

And then use it like that

<v-btn rounded :disabled="!this.uploadedFiles || this.uploadedFiles.length <= 0 || fileSizeValidation @click="confirmFileAdd">Add</v-btn>

Example :

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    numberInput: 10,
    uploadedFiles: []
  },
  methods: {
    test() {
      this.msg = "Hello World !";
    }
  },
  computed: {
    fileSizeValidation() {
      return this.uploadedFiles.some(file => !file.size || file.size > 100000000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" v-model="numberInput" />
  <button @click="uploadedFiles.push({ size : numberInput })">Add</button> {{ uploadedFiles }}
  <button :disabled="!this.uploadedFiles || this.uploadedFiles.length <= 0 || fileSizeValidation">Submit</button>
</div>

https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties

Answered By - Pierre Said

Answer Checked By - Katrina (PHPFixing Volunteer)

Read More

[FIXED] How can I trigger download base on API response?

Issue

I called an API to get the QR Code, I got the response back and was able to display it on the DOM as whatever the type user selected, but now I need to download it

I tried

axios
    .post(window.URL, body, { responseType: 'arraybuffer' })
    .then((response) => {
        console.log('get-serial', response.data)

        const base64 = btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))

        //download
        var img = new Image()
        img.src = 'data:image/jpeg;base64, ' + base64
        return img
    })
    .catch((err) => {
        console.log('Something went wrong: ', err)
    })

I don't see any image download when that run.

Solution

This works perfectly;

axios
    .post(window.URL, body, { responseType: 'arraybuffer' })
    .then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download',  'filename.ext')
        document.body.appendChild(link)
        link.click()
    })

Answered By - code-8

Answer Checked By - Senaida (PHPFixing Volunteer)

Read More