Cannot mount Vuejs 3, Vite, Laravel 9, Valet

Hi,

Just having an impossible time here. I have reduced the app.js to:

import './bootstrap';
import {createApp} from 'vue';
import AvatarDropdown from './components/AvatarDropdown.vue';

createApp(AvatarDropdown).mount('#app')

Bootstrap.js is from the latest version on github laravel/laravel .

The below is as basic as possible.

// AvatarDropdown.vue

<script>
	export default {
    name: "AvatarDropdown.vue",
}
</script>

<template>
    <h1>Welcome</h1>
</template>

<style scoped>

</style>

// vite.config.js

import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import manifestSRI from 'vite-plugin-manifest-sri';


export default defineConfig({
    global: {},
    server: {
        hmr: {
            host: 'localhost',
        },
    },
      plugins: [
          vue({
              template: {
                  transformAssetUrls: {
                      base: null,
                      includeAbsolute: false,
                  },
              },
          }),
          laravel({
              input: [
                  'resources/css/app.css',
                  'resources/js/app.js'
             ],
              refresh: true,
              manifest: true,
          }),
          manifestSRI()
      resolve: {
        alias: {
            '@': '/resources/js',
            '~bootstrap': path.resolve(__dirname, '/node_modules/bootstrap'),
            '~bootswatch': path.resolve(__dirname, '/node_modules/bootswatch'),
            'spatie-media-lib-pro': '/vendor/spatie/laravel-medialibrary-pro/resources/js',
            vue: 'vue/dist/vue.esm-bundler.js',
        },
      },
    build: {
        chunkSizeWarningLimit: 1600,
    },
});

I have the @vite(['resources/css/app.css', 'resources/js/app.js']) in the <head> . Have done all the things.

Now I thought maybe it's valet and vite misconfigured:

  ➜  Local:   https://localhost:5173/

  LARAVEL v9.39.0  plugin v0.7.0

  ➜  APP_URL: localhost

Any ideas?

Laravel Framework 9.39.0

trevorpan

3 years ago

Level 15

By adding this port to the .env file I was able to get the component to mount.

APP_URL=localhost:5173

However, why is this required? The docs https://laravel.com/docs/9.x/vite#main-content don't mention this port.

MaverickChan

3 years ago

Level 47

Are you on Mac or PC? if you are on Mac , just use Valet domain name such as App.test to view the site using localhost with port is vite server mode for most of the frontend user. Since Laravel has combined with vite , there is no need to visit it as localhost.

trevorpan

3 years ago

Level 15

@maverickchan yea, it’s strange that’s how I first had it setup (on mac). Away from computer for a bit, but I’ll try that out and get back. Thank you

Please or to participate in this conversation.