Я пытаюсь использовать пакет Vue, VueHighlight JS, чтобы отобразить отображение блока кода в представлении шаблона блейда. Я впервые работаю с Vue, я уже сталкивался с подобными проблемами, но все еще не могу заставить работать код.
js / app. js
import Vue from 'vue'
import VueHighlightJS from 'vue-highlight.js';
import 'vue-highlight.js/lib/allLanguages'
import 'highlight.js/styles/tomorrow-night.css';
Vue.use(VueHighlightJS);
Vue.component('block', require('./components/CodeBlock.vue').default);
const app = new Vue({
el: '#app',
components: {
'block': require('./components/CodeBlock.vue'),
}
//router: new VueRouter(routes)
})
CodeBlock. vue
<template>
<div>
<div>
<div class="block shadow flex items-center justify-center">
<highlight-code class="min-w-full" lang="javascript">
hgghfgg
</highlight-code>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
Попытка отобразить представление в show.blade. php
<head>
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{ $snippet->title }} </h1>
<div>{{ $snippet->description }} </div>
<div>{{ $snippet->code }} </div>
<block></block>
@yield('content')
</div>
</body>
</html>