import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'
import App from './App.vue'
import { router } from './router'
import '@/styles/tailwind.css'
import '@/styles/main.scss'
import sprite from '@/assets/icons/sprite.svg?raw'

// Inject SVG sprite into DOM once so <use href="#icon-*"> works everywhere
const spriteContainer = document.createElement('div')
spriteContainer.style.cssText = 'display:none;position:absolute;width:0;height:0'
spriteContainer.setAttribute('aria-hidden', 'true')
spriteContainer.innerHTML = sprite
document.body.prepend(spriteContainer)

const app = createApp(App)

app.use(router)
app.use(VueQueryPlugin, {
  queryClientConfig: {
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60,
        retry: 1,
      },
    },
  },
})

app.mount('#app')