What's the wrong with my code?

[devslayertech]

Since the update from Quasar v1 to Quasar v2 I was stuck for a while and now I can't load and use the IconPicker anymore.

Everything seems to have gotten more tiring and boring with this update.

I received the error:

The result in browser:

My Code:

<template>
  <q-page class="row items-center justify-evenly">
    <div class="q-pa-lg flex flex-center">
      <div style="width: 700px;">
        <q-input
          v-model="data.paginationColor"
          filled
          label="Pagination Color"
          hint="Enter colors only from the Quasar color palette (ex: 'orange-8')"
          class="q-mb-md"
        />
        <q-separator />
        <q-icon-picker
          v-model="data.value"
          v-model:model-pagination="data.pagination"
          icon-set="material-icons"
          :pagination-props="{
            maxPages: 5,
            input: true,
            color: data.paginationColor
          }"
          style="height: 220px;"
        />
      </div>
    </div>
  </q-page>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'IndexPage',

  setup () {
    const data = ref({
      value: '',
      paginationColor: 'orange-10',
      pagination: {
        itemsPerPage: 60,
        page: 0
      }
    })

    return {
      data
    }
  }
})
</script>

quasar.config.js - My extras

I'm using Vite with Typescript

I only created the new Quasar App then installed the QIconPicker and used this code above:
yarn add @quasar/quasar-ui-qiconpicker

I'm sorry for my ignorance. I'm learning everything again.

[devslayertech]

Editing the line of error in node_modules/@quasar/quasar-ui-qiconpicker/dist/index.esm.js to:

console.error(`QIconPicker: cannot find icon set found called ${ e }`);

The error now is:
QIconPicker: cannot find icon set found called ReferenceError: require is not defined

[hawkeye64]

This App Extension does not work with Vite yet