Как использовать pug внутри компонента vue?

Question

[Novamoscow]

Весь проект написан на pug. Использую внутри .pug файлов такую конструкцию

<tamplate lang="pug">
   .is__title.connect__title 
     button-counter

Все работает.

Далее решил перенести часть верстки в дочерний компонент vue, чтобы выводить ее динамически.

template: `
      <tamplate lang="pug"> 
        span {{ tr(lang).title }} 
      </tamplate>`

Попытался тем же способом вывести верстку и в компоненте, не получилось, переписывать на html не очень хочется, как правильно это реализовать ?

Answer 1

[Алексей Ярков]

https://pugjs.org/api/reference.html
Подключить pug и вот так должно сработать:

import pug from 'pug';

//...
template: pug.render(`span {{ tr(lang).title }} `)

Но я бы не костылил ))

Comments

[Novamoscow]

да уже написано все на pug надо изменинть немного совсем, не хочется все переписывать)

[Novamoscow]

не заработало
Не выводит темплейт

[Алексей Ярков]

Novamoscow, ну ошибку то хоть выводит? Что ж из вас инфу вытягивать приходится ))

[Novamoscow]

Алексей Ярков, сначала вроде бы ни чего не выводило)
SyntaxError: import declarations may only appear at top level of a module

Я кажется не правильно подключил, импорт как я понял нельзя

[Novamoscow]

Алексей Ярков, можно без importa закинуть pug ? в обычный js файл, бабел не использую

[Алексей Ярков]

Novamoscow, можно конечно, это ж я так, псевдокод написал.
Подключай на страницу скрипт и используй.