Разбор quasar API

import { AddressbarColor } from 'quasar'

export default () => {
  AddressbarColor.set('#a2e3fa')
}

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  // Requesting fullscreen mode:
  $q.fullscreen.request()
    .then(() => {
      // success!
    })
    .catch(err => {
      // oh, no!!!
    })

  // Exiting fullscreen mode:
  $q.fullscreen.exit()
    .then(() => {
      // success!
    })
    .catch(err => {
      // oh, no!!!
    })
}

import { AppVisibility } from 'quasar'
AppVisibility.appVisible // Boolean

// inside of a Vue file
import { useQuasar } from 'quasar'
setup () {
  const $q = useQuasar()
  // now use $q.appVisible (Boolean)
}

import { BottomSheet } from 'quasar'
BottomSheet.create({ ... }) // returns Object

// inside of a Vue file
import { useQuasar } from 'quasar'
setup () {
  const $q = useQuasar()
  $q.bottomSheet({ ... }) // returns Object
}

app.use(Quasar, {
  config: {
    brand: {
      primary: '#1976D2',
      secondary: '#26A69A',
      accent: '#9C27B0',
      positive: '#21BA45',
      negative: '#C10015',
      info: '#31CCEC',
      warning: '#F2C037'
    }
  }
});

import { Cookies } from 'quasar'
const value = Cookies.get('cookie_name')
const cookies = Cookies.getAll()
Cookies.has('cookie_name') // Boolean
Cookies.set('cookie_name', cookie_value)

import { useQuasar } from 'quasar'
setup () {
  const $q = useQuasar()

  // get status
  console.log($q.dark.isActive) // true, false

  // get configured status
  console.log($q.dark.mode) // "auto", true, false

  // set status
  $q.dark.set(true) // or false or "auto"

  // toggle
  $q.dark.toggle()
}

this.$q.dialog({
  title: 'Информация',
  message: 'Это простое сообщение.'
});


/**/
this.$q.dialog({
  title: 'Подтверждение',
  message: 'Вы уверены?',
  cancel: true, // Показать кнопку отмены
  persistent: true // Запретить закрытие кликом вне диалога
}).onOk(() => {
  console.log('OK');
}).onCancel(() => {
  console.log('Отмена');
});
/**/
this.$q.dialog({
  title: 'Выбор действия',
  message: 'Что вы хотите сделать?',
  options: {
    type: 'radio',
    model: 'option1',
    items: [
      { label: 'Опция 1', value: 'option1', color: 'secondary' },
      { label: 'Опция 2', value: 'option2', color: 'secondary' }
    ]
  },
  cancel: true,
  persistent: false
}).onOk(data => {
  console.log('Выбрано:', data);
});
/**/
this.$q.dialog({
  title: 'Введите имя',
  prompt: {
    model: '',
    type: 'text'
  },
  cancel: true
}).onOk(data => {
  console.log('Введено:', data);
});

framework: {
  // webfont-based example
  iconSet: 'mdi-v7'
}

// использование в проекте
const homeIcon = this.$q.iconSet.set.home; // например: 'mdi-home'
console.log(homeIcon); // выведет: 'mdi-home'

<template>
  <div>
    <q-icon :name="homeIcon" size="32px" />
    <q-btn :icon="$q.iconSet.set.account" label="Профиль" />
  </div>
</template>

<template>
  <div v-intersection="onIntersection">
    Я буду отслеживаться на предмет появления в области видимости
  </div>
</template>

<script setup>
function onIntersection(entry) {
  if (entry.isIntersecting) {
    console.log('Элемент появился на экране!');
  } else {
    console.log('Элемент исчез из области видимости');
  }
}
</script>

console.log(this.$q.lang.isoName); // например: 'ru-RU'
console.log(this.$q.lang.rtl);     // true или false

import { langRu } from 'quasar/lang/ru';
// или
import ru from 'quasar/lang/ru';

this.$q.lang.set(ru);

<template>
  <div>
    <p>Текущий язык: {{ $q.lang.isoName }}</p>
    <p>RTL: {{ $q.lang.rtl }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import langEn from 'quasar/lang/en-US';
import langRu from 'quasar/lang/ru';

const currentLang = ref($q.lang.isoName);

function changeLanguage(langCode) {
  if (langCode === 'ru') {
    $q.lang.set(langRu);
    currentLang.value = 'ru-RU';
  } else {
    $q.lang.set(langEn);
    currentLang.value = 'en-US';
  }
}
</script>

<template>
  <q-select
    v-model="currentLang"
    :options="['en-US', 'ru-RU']"
    @update:model-value="changeLanguage"
  />
</template>

<template>
  <q-input
    v-model="inputValue"
    :placeholder="$q.lang.label.clear" // Перевод "Clear"
  />
</template>

const $q = useQuasar()

$q.loading.show();
$q.loading.hide()

$q.loading.show({
  delay: 400,             // Задержка перед показом (мс)
  message: 'Загрузка...', // Текст сообщения
  spinnerSize: 80,        // Размер спиннера (число)
  spinnerColor: 'amber',  // Цвет спиннера (согласно цветам Quasar)
  backgroundColor: 'black',
  messageColor: 'white'
});

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.loadingBar.start()
  $q.loadingBar.stop()
  $q.loadingBar.increment(value)
  $q.loadingBar.set(0.3);
}

<script setup>
async function fetchData() {
  $q.loadingBar.start();

  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  } finally {
    $q.loadingBar.stop();
  }
}
</script>

<template>
  <q-btn @click="fetchData" label="Загрузить данные" />
</template>

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.localStorage.set(key, value)
  const value = $q.localStorage.getItem(key)

  $q.sessionStorage.set(key, value)
  const otherValue = $q.sessionStorage.getItem(key)
}

try {
  $q.localStorage.set(key, value)
} catch (e) {
  // data wasn't successfully saved due to
  // a Web Storage API error
}

<script setup>
import { onMounted } from 'vue';
import { useMeta } from 'quasar';

onMounted(() => {
  useMeta({
    title: 'Динамический заголовок',
    meta: {
      description: { name: 'description', content: 'Описание' }
    }
  });
});
</script>

import { useMeta } from 'quasar'

const metaData = {
  // sets document title
  title: 'Index Page',
  // optional; sets final title as "Index Page - My Website", useful for multiple level meta
  titleTemplate: title => `${title} - My Website`,

  // meta tags
  meta: {
    description: { name: 'description', content: 'Page 1' },
    keywords: { name: 'keywords', content: 'Quasar website' },
    equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' },
    // note: for Open Graph type metadata you will need to use SSR, to ensure page is rendered by the server
    ogTitle:  {
      property: 'og:title',
      // optional; similar to titleTemplate, but allows templating with other meta properties
      template (ogTitle) {
        return `${ogTitle} - My Website`
      }
    }
  },

  // CSS tags
  link: {
    material: { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
  },

  // JS tags
  script: {
    ldJson: {
      type: 'application/ld+json',
      innerHTML: `{ "@context": "http://schema.org" }`
    }
  },

  // <html> attributes
  htmlAttr: {
    'xmlns:cc': 'http://creativecommons.org/ns#', // generates <html xmlns:cc="http://creativecommons.org/ns#">,
    empty: undefined // generates <html empty>
  },

  // <body> attributes
  bodyAttr: {
    'action-scope': 'xyz', // generates <body action-scope="xyz">
    empty: undefined // generates <body empty>
  },

  // <noscript> tags
  noscript: {
    default: 'This is content for browsers with no JS (or disabled JS)'
  }
}

export default {
  setup () {
    // needs to be called in setup()
    useMeta(metaData)
  }
}

<template>
  <div>
    <q-btn @click="shuffleItems" label="Перемешать" />
    <div ref="listContainer">
      <div v-for="item in items" :key="item.id" class="list-item">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { $q } from 'quasar';

const items = ref([
  { id: 1, label: 'A' },
  { id: 2, label: 'B' },
  { id: 3, label: 'C' },
  { id: 4, label: 'D' }
]);

const listContainer = ref(null);

async function shuffleItems() {
  // Перемешиваем массив
  items.value.sort(() => Math.random() - 0.5);

  await nextTick();

  $q.morph({
    from: listContainer.value,
    duration: 500,
    easing: 'ease-in-out'
  });
}
</script>

<template>
  <div ref="targetRef">
    <p>Этот элемент будет отслеживаться</p>
    <button @click="addItem">Добавить элемент</button>
    <div v-for="(item, i) in items" :key="i">{{ item }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { $q } from 'quasar';

const targetRef = ref(null);
const items = ref(['Item 1']);

let observerHandle = null;

onMounted(() => {
  observerHandle = $q.mutation.observe(
    targetRef.value,
    (mutations) => {
      mutations.forEach(mutation => {
        if (mutation.type === 'childList') {
          console.log('Изменён список детей:', mutation.addedNodes.length, 'добавлено');
        }
      });
    },
    {
      childList: true,
      subtree: true
    }
  );
});

function addItem() {
  items.value.push(`Item ${items.value.length + 1}`);
}

onUnmounted(() => {
  if (observerHandle) {
    $q.mutation.stop(observerHandle);
  }
});
</script>

<template>
  <q-btn @click="showSimpleNotification" label="Простое уведомление" />
</template>

<script setup>
import { useQuasar } from 'quasar';

const $q = useQuasar();

function showSimpleNotification() {
  $q.notify('Простое уведомление');
}
</script>

<template>
  <div>
    <p>Платформа: {{ platformInfo }}</p>
    <p v-if="isMobile">Вы используете мобильное устройство</p>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useQuasar } from 'quasar';

const $q = useQuasar();

const platformInfo = computed(() => {
  if ($q.platform.is.ios) return 'iOS';
  if ($q.platform.is.android) return 'Android';
  if ($q.platform.is.win) return 'Windows';
  if ($q.platform.is.mac) return 'macOS';
  return 'Другая платформа';
});

const isMobile = computed(() => $q.platform.is.mobile);
</script>