Hi All,
I'm following along with Jeffrey's Vue course, but now I'm trying to incorporate it into Laravel
I have a components directory inside my resources/js folder, with all of these files (copied and pasted I haven't changed anything: https://gist.github.com/JeffreyWay/7ebe043f72ddd64fb54528c74c102bc7
My app.js file looks like this:
import './bootstrap';
import { createApp } from "vue";
import App from './components/App.js';
createApp(App).mount("#app")
And my blade template looks like so:
<!doctype html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<title>Episode 6: Bring it All Together</title>
<!-- <script src="https://unpkg.com/vue@3"></script> -->
<script src="https://cdn.tailwindcss.com"></script>
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body class="h-full grid place-items-center">
<div id="app"></div>
</body>
</html>
Unfortunately nothing displays, and Vue Devtools just shows "" (root inside less than and greater than signs, for some reason it doesn't display on the forum) and nothing else
Have I missed a step?
Edit:
I'm getting these warning:
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation cdn.tailwindcss.com:61:1709
[vite] connecting... client.ts:19:8
[vite] connected. client.ts:175:14
Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__, __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.
For more details, see https://link.vuejs.org/feature-flags. runtime-core.esm-bundler.js:5258:12
[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
at <App>
Why don't continue with/reply on your previously created thread? https://laracasts.com/discuss/channels/javascript/how-to-import-vue
Are you trying to use Vue to create am SPA with Laravel or do you only want to use some Vue components in your blade files ?
Yes. Please don‘t create multiple threads for the same topic, @jackjones
Please or to participate in this conversation.