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

Хочу использовать на странице vue, но его синтаксис конфликтует с fenom.
Тоесть попытка сделать банальный

<div v-for="car in park">{{car.id}}</div>

убивает страницу из-за {{

Наверняка ведь я не первый столкнулся?
Про то что vue умеет в файловые компоненты и что это наверное решит проблему — знаю, но конкретно здесь не применимо, на хостинге нет node как таковой и не поставить.
Подключил vue самым банальным образом через cdn

Александр Мельник

30 июня 2022, 17:42

2 183

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

Артур Шевченко

30 июня 2022, 18:01

Есть ощущение, что подобный вопрос я уже видел, только не помню где. Но там писали, что во Vue можно изменить скобки по умолчанию, но я не знаю насколько это правда. В общем, чем мог, так сказать)))

Александр Мельник

30 июня 2022, 18:04

наверное вы об этой странице
telq.org/question/6200fe05b2d5debe9ebb509c
но тут наоборот посоветовали изменить скобки у фенома.
Не знаю возможно ли это, но такое себе решение.

Артур Шевченко

30 июня 2022, 18:47

Да, об этой. Да такое себе решение. А напиши в группу.

Николай Савин

30 июня 2022, 19:16

Как работаю я, когда мне нужно вставить виджет VUE внутрь MODX

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

В шаблоне MODX — там где должен быть виджет пишу

<div id="vue-widjet-one"></div>

А VUE распознав ID заменит этот блок на подготовленный виджет.

Александр Мельник

30 июня 2022, 19:51

спасибо. Мне как дилетанту очень многое в вашем тексте не знакомо. Про то что во vue есть какие то виджеты — слышу впервые.

Николай Савин

01 июля 2022, 09:26

Виджетами я называю отдельные модули. По отношению ко VUE наверное так никто не говорит действительно. Но в целом называть какой то отдельный кусок интерактивного кода виджетом — нормально. Во VUE наверное корректнее писать компоненты.
В более менее крупном проекте может быть запросто десяток подключаемых VUE компонентов. У меня порой страница целиком — один большой VUE компонент.

deleted

30 июня 2022, 20:42

delimiters: ['(#', '#)'],

deleted

30 июня 2022, 20:43

или

<span v-text="car.id"></span>

deleted

30 июня 2022, 20:46

Советую alpine.js, более легковесный, если что-то не совсем сложное, вполне может заменить vue. Плюс в том, что часто вообще не нужно ничего писать в скриптах.

Василий Наумкин

01 июля 2022, 14:51

А я советую облегчённый Vue Petite — github.com/vuejs/petite-vue

deleted

01 июля 2022, 15:55

По сути то же самое, как я понял)
В alpine есть удобная штука: @click.outside=«open = false» (при клике вне элемента). В vue приходилось для этого костыли писать

Василий Наумкин

01 июля 2022, 14:54

Самое простое — завернуть код с Vue внутрь тега {ignore}...{/ignore}, он специально для этого и придуман.

srs

01 июля 2022, 15:34

Разве проблема с

{ignore}...{/ignore}

в сочетании с другими фигурными скобками без пробела в начале уже решена?
Задаю вопрос из-за любопытства, давненько уже не работал с modx + fenom.

Василий Наумкин

01 июля 2022, 15:59

Тег {ignore} должен тупо пропускать вообще всё, что внутри.

Я как-то пару раз интегрировал Vue на страницу MODX с Fenom — всё игнорировалось, как должно.

Александр Мельник

01 июля 2022, 17:31

Не знаю почему, Василий, но у меня не работает тег {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

Мне кажется об этом @Николай Савин и писал.

Николай Савин

03 июля 2022, 10:56

Совсем не об этом писал. В этом варианте VUE все равно внутри шаблона подключается.
Я использую VUE CLI. В таком варианте — в шаблон вообще ничего не подключается. Только JS файлик, в котором скомпилированная логика. JS смотрит в DOM дереве заранее указанный ID и заменяет этот DOM элемент на VUE компонент.

Алексей Соин

12 июля 2022, 12:36

мне както давно тоже нужно было игнорировать подключаемые метрики и выводить 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}

таким образом не нужно переопределять вьюшные теги и както стараться подгонять код чтобы феном не ломался))

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.