This looks like a misconfiguration of some sort. Is port 5173 open on your machine? is the APP_URL set properly in your .env file?
Nov 14, 2022
6
Level 9
net::ERR_CONNECTION_REFUSED
I'm trying to use Vue 3 + Inertia, I installed it using Breeze. I get this error in the console like this and I get a blank page.
http://[::1]:5173/@vite/client net::ERR_CONNECTION_REFUSED
http://[::1]:5173/resources/js/app.js net::ERR_CONNECTION_REFUSED
http://[::1]:5173/resources/js/Pages/Test.vue net::ERR_CONNECTION_REFUSED
I'm not sure which files are relevant but here are some important ones
//composer.json
...
"require": {
"php": "^8.0.2",
"aacotroneo/laravel-saml2": "^2.1",
"guzzlehttp/guzzle": "^7.2",
"inertiajs/inertia-laravel": "^0.6.3",
"laravel/framework": "^9.19",
"laravel/sanctum": "^2.8",
"laravel/tinker": "^2.7",
"sal/idp-sdk": "dev-master",
"tightenco/ziggy": "^1.0"
},
"require-dev": {
"fakerphp/faker": "^1.9.1",
"laravel/breeze": "^1.14",
"laravel/pint": "^1.0",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^6.1",
"phpunit/phpunit": "^9.5.10",
"spatie/laravel-ignition": "^1.0"
},
...
//package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@inertiajs/inertia": "^0.11.0",
"@inertiajs/inertia-vue3": "^0.6.0",
"@inertiajs/progress": "^0.2.7",
"@tailwindcss/forms": "^0.5.3",
"@vitejs/plugin-vue": "^3.0.0",
"autoprefixer": "^10.4.12",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.6.0",
"lodash": "^4.17.19",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"vite": "^3.0.0",
"vue": "^3.2.41"
}
}
//app.js
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
//vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue(),
],
});
//routes web.php
Route::middleware('auth')->group(function () {
Route::get('/', function () {
return Inertia::render('Test', ['data' => 'dddd']);
})->name('dashboard');
});
//Test.vue
<script setup>
</script>
<template>
<h1>Dashboard</h1>
{{$page.props}}
</template>
How can I fis this issue?
Please or to participate in this conversation.