Стандарты
Auto-imports в Nuxt
Nuxt автоматически импортирует компоненты, composables, utils и stores. Явные импорты не нужны.
Nuxt автоматически импортирует компоненты, composables, utils и stores. Явные импорты не нужны.
Что УДАЛЯТЬ
1. Импорты из Vue
// ❌ УДАЛИТЬ
import { ref, reactive, computed, watch, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useSlots, type Slots } from 'vue'
Всё это автоматически доступно в Nuxt.
2. Импорты компонентов
// ❌ УДАЛИТЬ
import Filters from '@/components/orders/Filters.vue'
import CustomModal from '@/components/CustomModal.vue'
import BlockWrap from '@/components/BlockWrap.vue'
Компоненты автоматически регистрируются.
3. Импорты stores
// ❌ УДАЛИТЬ
import { useUserStore } from '@/store/user'
import { useCollectionStore } from '@/store/collection'
// ✅ Просто используй
const userStore = useUserStore()
4. Импорты composables
// ❌ УДАЛИТЬ
import { useAuthFetch } from '@/composable/useAuthFetch'
// ✅ Просто используй
const authFetch = useAuthFetch()
5. Импорты utils/helpers
// ❌ УДАЛИТЬ
import { formatCurrency } from '@/helpers/formatCurrency'
import { toQueryParams } from '@/helpers/toQueryParams'
// ✅ Просто используй функции
const price = formatCurrency(1000)
Что ОСТАВЛЯТЬ
1. Внешние библиотеки
// ✅ ОСТАВИТЬ
import dayjs from 'dayjs'
import { storeToRefs } from 'pinia'
import { message, type TableColumnType } from 'ant-design-vue'
import {
CheckCircleOutlined,
EditOutlined,
} from '@ant-design/icons-vue'
import debounce from 'lodash.debounce'
2. Типы из types/
// ✅ ОСТАВИТЬ
import type { User } from '~/types/User'
import type { Order, OrderStatus } from '~/types/Order'
import { SERVICE_TYPES, type IService } from '~/types/Services'
3. Enums и константы
// ✅ ОСТАВИТЬ
import { OrderStatus } from '~/types/Order'
import { API_ENDPOINTS } from '~/constants/api'
Конфигурация nuxt.config.ts
export default defineNuxtConfig({
// Компоненты с pathPrefix: false
components: [
{
path: '~/components',
pathPrefix: false, // Используем имя файла
},
],
// Auto-imports для composables и utils включены по умолчанию в Nuxt 4
// Явная конфигурация НЕ нужна — Nuxt автоматически сканирует:
// - app/composables/
// - app/utils/
})
Исправление путей
При миграции замени @/ на ~/:
// ❌ Старый стиль (Vue)
import type { User } from '@/types/User'
// ✅ Nuxt стиль
import type { User } from '~/types/User'
Чек-лист при переносе файла
- Удалить импорты Vue (
ref,computed,onMounted, etc.) - Удалить импорты Vue Router (
useRoute,useRouter) - Удалить импорты компонентов
- Удалить импорты stores
- Удалить импорты composables
- Удалить импорты utils/helpers
- Исправить
@/на~/для типов - Оставить импорты внешних библиотек
Пример до/после
До (Vue 3 + Vite)
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { EditOutlined } from '@ant-design/icons-vue'
import Filters from '@/components/orders/Filters.vue'
import CustomModal from '@/components/CustomModal.vue'
import { useUserStore } from '@/store/user'
import { useAuthFetch } from '@/composable/useAuthFetch'
import { formatCurrency } from '@/helpers/formatCurrency'
import type { Order } from '@/types/Order'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const authFetch = useAuthFetch()
const orders = ref<Order[]>([])
const total = computed(() => orders.value.length)
onMounted(async () => {
orders.value = await authFetch<Order[]>('/orders')
})
</script>
После (Nuxt 4)
<script setup lang="ts">
import { message } from 'ant-design-vue'
import { EditOutlined } from '@ant-design/icons-vue'
import type { Order } from '~/types/Order'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const authFetch = useAuthFetch()
const orders = ref<Order[]>([])
const total = computed(() => orders.value.length)
onMounted(async () => {
orders.value = await authFetch<Order[]>('/orders')
})
</script>