Soer44

Нашёл решение данного вопрос. Ответ как всегда скрывался в документации, причём я его несколько раз уже читал, и даже что то пробовал применить, но видимо этого оказалось не достаточно и ничего не работало.

Для решения данного вопроса, необходимо добавить в ГЛАВНЫЙ файл стилей ГЛОБАЛЬНЫЕ правила и стили из документации, а именно переменные которые привязаны только к vueform.

стили css выглядят так:

:root, :before, :after, * {
	--vf-primary: #07bf9b;
	--vf-primary-darker: #06ac8b;
	--vf-danger: #ef4444;
	--vf-danger-lighter: #fee2e2;
	--vf-success: #10b981;
	--vf-success-lighter: #d1fae5;
  
	--vf-gray-50: #f9fafb;
	--vf-gray-100: #f3f4f6;
	--vf-gray-200: #e5e7eb;
	--vf-gray-300: #d1d5db;
	--vf-gray-400: #9ca3af;
	--vf-gray-500: #6b7280;
	--vf-gray-600: #4b5563;
	--vf-gray-700: #374151;
	--vf-gray-800: #1f2937;
	--vf-gray-900: #111827;
  
	--vf-dark-50: #f9fafb;
	--vf-dark-100: #f3f4f6;
	--vf-dark-200: #e5e7eb;
	--vf-dark-300: #d1d5db;
	--vf-dark-400: #9ca3af;
	--vf-dark-500: #6b7280;
	--vf-dark-600: #4b5563;
	--vf-dark-700: #374151;
	--vf-dark-800: #1f2937;
	--vf-dark-900: #111827;
  
	--vf-ring-color: #07bf9b66;
	--vf-ring-width: 2px;
} 
// и так далее, взял все переменные из документации, чтобы не париться, 
// потому что их там почти 400 строчек кода.

ссылка на документацию https://vueform.com/themes/tailwind#customization

Верный ответ на вопрос.
Надо было тег а заменить на накст-линк. И всё заработало нормально.
функция toggleNode позволяет открывать дерево по клику на заголовок. Ну типа чтобы не целиться по встроенной в плагин tree кнопке.

<template>
	<keep-alive>
	<Tree
	v-model:expandedKeys="expandedKeys"
  @nodeSelect="toggleNode"
  selectionMode="single"
	:value="nodes" 
		 class="mw-[300px] bg-white transition-all relative">
		<template #default="slotProps">
			<b>{{ slotProps.node.label }}</b>
		</template>
		<template #url="slotProps">
			<nuxt-link :href="slotProps.node.data">{{ slotProps.node.label }}</nuxt-link>
		</template>
	</Tree>
	</keep-alive>

</template>

<script lang="ts" setup>
import Tree from 'primevue/tree';
import { ref } from 'vue';


const nodes = ref([
	{
		label: 'Меню',
	},
	{
		key: '0',
		label: 'Маркетинговые акции',
		children: [
			{ key: '0-0', label: 'Промоакции', data: '/promotions', type: 'url' },
			{ key: '0-1', label: 'Промокоды', data: '/promocodes', type: 'url' },
			{ key: '0-2', label: 'Скидки', data: '/discounts', type: 'url' },
		]
	},
	{
		key: '1',
		label: 'Книги',
		children: [
			{ key: '1-0', label: 'Книги', data: '/books', type: 'url' },
			{ key: '1-1', label: 'Авторы', data: '#', type: 'url' },
			{ key: '1-2', label: 'Серии', data: '#', type: 'url' },
		]
	}
]);

const expandedKeys = ref({});

function toggleNode({ children, key }) {
	if (children) {
		expandedKeys.value[key] = !expandedKeys.value[key];
	}
}



</script>

Картинки надо класть не в public, а в assets, потому что билд забирает их оттуда и компилит в рабочую версию. Само собой они у вас на деве работают, потому что путь прямой прописан, а после билда приложение их не находит, потому что их нет в public. Попробуйте переместить в assets а потом сделать билд. И смотрите пути правильно ли прописаны.

Вопрос был поставлен изначально не корректно. Мне надо было методом useFetch передать данные на сервер апи. Чтобы данные там записались. Формат и валидацию определяет бэкенд. Ниже скину пример с передачей текстовых данных. Передачу файла так и не победили, пока. Проблема была с бэкендом. Что то там дописали переписали и заработало. Передаётся без заголовков.

<template>
  <div>
    <h4>Добавление новой категории</h4>
    <form>
      <div>
        <label for="title">Добавить тег:</label>
        <input type="text" id="name" v-model="name" />
      </div>
      <button @click.prevent="handleSubmit">Отправить</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const name = ref("");

const handleSubmit = async () => {
  await useFetch("https://api.storage/api/", {
    method: "post",
    body: {
      name: name.value,
    },
  });
};
</script>