Очень глупый вопрос. А как вы используете синтаксис vue на страницах с fenom?

Хочу использовать на странице vue, но его синтаксис конфликтует с fenom.
Тоесть попытка сделать банальный
<div v-for="car in park">{{car.id}}</div>
убивает страницу из-за {{

Наверняка ведь я не первый столкнулся?
Про то что vue умеет в файловые компоненты и что это наверное решит проблему — знаю, но конкретно здесь не применимо, на хостинге нет node как таковой и не поставить.
Подключил vue самым банальным образом через cdn
Александр Мельник
30 июня 2022, 17:42
modx.pro
649
0

Комментарии: 18

Артур
30 июня 2022, 18:01
0
Есть ощущение, что подобный вопрос я уже видел, только не помню где. Но там писали, что во Vue можно изменить скобки по умолчанию, но я не знаю насколько это правда. В общем, чем мог, так сказать)))
Николай Савин
30 июня 2022, 19:16
0
Как работаю я, когда мне нужно вставить виджет VUE внутрь MODX

Использую VUE CLI с компонентами
Создаю отдельный проект. Страницу index.html забираю с сайта, чтобы иметь нужный дизайн, со всеми стилями и скриптами.
Далее готовлю нужный мне VUE виджет. Компилирую бандл, и получившийся JS файл добавляю в MODX проект.

В шаблоне MODX — там где должен быть виджет пишу
<div id="vue-widjet-one"></div>
А VUE распознав ID заменит этот блок на подготовленный виджет.
    Александр Мельник
    30 июня 2022, 19:51
    0
    спасибо. Мне как дилетанту очень многое в вашем тексте не знакомо. Про то что во vue есть какие то виджеты — слышу впервые.
      Николай Савин
      01 июля 2022, 09:26
      0
      Виджетами я называю отдельные модули. По отношению ко VUE наверное так никто не говорит действительно. Но в целом называть какой то отдельный кусок интерактивного кода виджетом — нормально. Во VUE наверное корректнее писать компоненты.
      В более менее крупном проекте может быть запросто десяток подключаемых VUE компонентов. У меня порой страница целиком — один большой VUE компонент.
    Лёша
    30 июня 2022, 20:42
    0
    delimiters: ['(#', '#)'],
      Лёша
      30 июня 2022, 20:43
      0
      или
      <span v-text="car.id"></span>
        Лёша
        30 июня 2022, 20:46
        +1
        Советую alpine.js, более легковесный, если что-то не совсем сложное, вполне может заменить vue. Плюс в том, что часто вообще не нужно ничего писать в скриптах.
          Василий Наумкин
          01 июля 2022, 14:51
          0
          А я советую облегчённый Vue Petite — github.com/vuejs/petite-vue
            Лёша
            01 июля 2022, 15:55
            0
            По сути то же самое, как я понял)
            В alpine есть удобная штука: @click.outside=«open = false» (при клике вне элемента). В vue приходилось для этого костыли писать
        Василий Наумкин
        01 июля 2022, 14:54
        +1
        Самое простое — завернуть код с Vue внутрь тега {ignore}...{/ignore}, он специально для этого и придуман.
          srs
          srs
          01 июля 2022, 15:34
          0
          Разве проблема с
          {ignore}...{/ignore}
          в сочетании с другими фигурными скобками без пробела в начале уже решена?
          Задаю вопрос из-за любопытства, давненько уже не работал с modx + fenom.
            Василий Наумкин
            01 июля 2022, 15:59
            0
            Тег {ignore} должен тупо пропускать вообще всё, что внутри.

            Я как-то пару раз интегрировал Vue на страницу MODX с Fenom — всё игнорировалось, как должно.
            Александр Мельник
            01 июля 2022, 17:31
            +1
            Не знаю почему, Василий, но у меня не работает тег {ignore} почти никогда.
            Часто в шаблон нужно добавить какой то сторонний скрипт, например от яндекс метрики, который тоже конфликтует. И никогда оборачивание в {ignore} не помогало, только вручную проставить пробелы.
            И в случае с vue тоже не помогло.

            Пока решил пользоваться глобальными компонентами vue, описывая их все в одном файле, а в шаблон вставлять только
            <park-list v-for="item in park" v-bind:car="item" v-bind:key="item.id"></park-list>
              Артур
              01 июля 2022, 20:42
              0
              Мне кажется об этом @Николай Савин и писал.
                Николай Савин
                03 июля 2022, 10:56
                0
                Совсем не об этом писал. В этом варианте VUE все равно внутри шаблона подключается.
                Я использую VUE CLI. В таком варианте — в шаблон вообще ничего не подключается. Только JS файлик, в котором скомпилированная логика. JS смотрит в DOM дереве заранее указанный ID и заменяет этот DOM элемент на VUE компонент.
                Алексей Соин
                12 июля 2022, 12:36
                0
                мне както давно тоже нужно было игнорировать подключаемые метрики и выводить vue компонент, тег {ignore} не очень с этим справляется, я делал так, создал плагин ignore на событие pdoToolsOnFenomInit, со следующим содержанием:

                <?php
                /** @var modX $modx */
                switch ($modx->event->name) {
                    case 'pdoToolsOnFenomInit':
                        $fenom->addModifier('ignore', function ($input) {
                            $output = '{ignore}' . $input . '{/ignore}';
                            return $output;
                        });
                        break;
                }
                а уже метрики и vue компоненты я добавлял с помощью чанков и настройками в clientConfig, добавляя вконце модификатор ignore, выглядило это чтото типо

                {'metrics' | config | ignore}
                {'vue-chunk' | chunk | ignore}
                таким образом не нужно переопределять вьюшные теги и както стараться подгонять код чтобы феном не ломался))
              Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
              18