Показать источник vue component in-app

Question

Я хотел бы иметь страницу с некоторым компонентом vue (скажем, TODO-list) и переключением View-Source/live-demo, который пользователь может активировать для переключения между рабочим компонент и его исходный код.

Теперь, я могу захватить необработанный код файла .vue внутри моего приложения?

Как:

import Todo from './components/Todo.vue' 
//use Todo as a component, no problema 
var todocode = getRawCode('./components/Todo.vue'); //how do I do this? 

Я использую Webpack как мой Bundler и одна идея у меня есть, что, возможно, я мог бы как-то require('./components/Todo.vue', someNinjaOptionsHereMaybe) перекрывая vue-loader (по умолчанию настроен в моих webpack.config.js для .vue файлов) с file-loader " только один раз "в приложении - но у меня нет подсказки, если это действительно возможно.

Мысли?

---

UPDATE

По желанию @Saurabh, я попытаюсь объяснить, как именно я хотел бы использовать это.

This является то, что я называю «компонент каталога» (Нажмите на кнопку «Dashboard», чтобы расширить и увидеть две доступные компоненты: IssuesDocs и TodoDocs)

Обратите внимание, что docs application нашел эти два компонента динамически - если я создаю любой файл, который соответствует src/**/* Docs.vue, он будет добавлен в список компонентов слева, и он будет доступен справа, когда пользователь нажмет на него.

Справа я хотел бы иметь представление в виде вкладок с двумя вариантами: «Вид» и «Код».

«Вид» покажет рабочий компонент (как это делается прямо сейчас), а «Код» покажет код, например, для «TodoDocs», код покажет содержимое TodoDocs .vue файл, например так:

<template> 
    <Todo> 
</template> 

<script> 

import Todo from '../Todo.vue' 

export default { 
    name: 'TodoDocs', 
    components: {Todo} 
} 
</script> 

Это служит «исполняемой документации» о том, как использовать компонент Todo (который в данном случае является столь же легко, как импортировать и добавить <Todo> тег).

Я обнаружил, что наличие такого каталога компонентов, как это, весьма полезно, когда вы работаете в команде среднего и большого размера, работающей над одним и тем же приложением. Мне удалось реализовать эту концепцию с помощью AngularJs, теперь я пытаюсь сделать то же самое с vuejs.

Answer 1

В невероятном повороте событий я действительно нашел решение для этого.

Получается, что я могу require(!!my-loader!my-module), и я нашел это raw-loader, что делает то, что я хочу.

Так что делаете this change на мой код фактически позволили мне загрузить .vue компоненту и затем нагрузки снова с сырым-загрузчиком, чтобы получить его источник.

Это работает, невероятно.

Рабочий результат live