• Как лучше подключать svg иконки во vue js?

    @Pike-meow
    Pike - is a life
    На самом деле, решение зависит от ситуации.

    Если у вас есть не огромный(!) набор иконок для повсеместного использования - то вам нужен SVG Sprite. В других ответах уже накидали даже названий библиотек для Vue.

    Если коротко, то использование выглядит следующим образом:

    Кладете в public файл со спрайтами (обычно, сборка такого файла берут на себя библиотеки. Не хитрый SVG файл, который можно один раз собрать и юзать сборку)

    А далее - элементарный компонент

    Icon.vue
    <template>
      <svg>
        <use :xlink:href="`path-to-sprite.svg#${iconName}`"></use>
      </svg>
    </template>
    
    <script lang="ts" setup>
      defineProps<{
        iconName: string;
      }>();
    </script>


    Использования будет выглядеть следующим образом:
    App.vue
    <template>
      <div>
        <Icon name="some-icon-1" />
        <Icon name="some-icon-2" />
        <Icon name="some-icon-3" />
      </div>
    </template>
    
    <script lang="ts" setup>
      import Icon from './Icon.vue';
    </script>


    Тут есть небольшой подводный камень, связанный с размерами (use не учитывает width, height, viewBox иконки, которая в Spritemap). Обходится элементарно - добавлением размера для svg с помощью CSS.

    Если вам нужны 2-3 иконки - более рационально будет просто заинлайнить их в template. Не очень оптимизировано, зато не тратим кучи времени на ненужные телодвижения.

    В случае с большим количеством иконок (более 500) SVG Sprite будет неэффективен ввиду того, что на каждую страницу будет загружаться тонна ненужных иконок. В таких случаях, лучше хранить иконки без спрайта, просто в ассетах и использовать ссылки на них в <use>.

    Ссылки:
    - https://developer.mozilla.org/en-US/docs/Web/SVG/E...
    Ответ написан
    Комментировать
  • Шаблон админки с иерархической структурой данных, где найти?

    @Pike-meow
    Pike - is a life
    Погуглите аналоги/шаблоны/клоны админки laravel-nova.
    Такие админки больше похожи не на стандартные адмики, а на ПО для просмотра баз данных.

    Так-же добавлю, что по моему опыту, иерархические админки - это зло.
    Это быстро разрабатывать, но потом страдания. Но в общем, нужно смотреть по кейсу.
    Ответ написан
    Комментировать
  • Где и как хранить функции общего назначения?

    @Pike-meow
    Pike - is a life
    Да, используйте простые .js файлы и подключайте импортами

    Структура
    projectFolder
      ...
      src
        components
          Component.vue
        utils
          numberWithComma.js


    Component.vue
    <template>
      <span>{{ valueChanged }}</span>
    </template>
    
    <script>
    import numberWithComma from '../utils/numberWithComma.js';
    // или настройте алиасы, тогда путь к утилитам может выглядеть так: '@/numberWithComma.js'
    
    export default {
      data: ({
        value: 0.123456789  
      }),
      computed: {
        valueChanged() {
          return numberWithComma(this.value);
        }
      }
    };
    </script>


    numberWithComma.js
    const numberWithComma = (x) => x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ", ");
    
    export default numberWithComma;
    Ответ написан
    Комментировать