Setting up Vue using Jeffrey's Vue series and Laravel

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>

gych

2 years ago

Level 29

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 ?

2 likes

martinbean

2 years ago

Level 80

Yes. Please don‘t create multiple threads for the same topic, @jackjones

2 likes

Please or to participate in this conversation.