I'm in a bit of a bind with my Laravel project and I'm struggling to find a solution. I recently tried to upgrade from vue2 to vue3 with typescript, following this tutorial for the vue upgrade and this tutorial for typescript integration. However, when I try to serve the project (php artisan serve), I'm getting a "404 Not Found" error for . I'm also seeing warnings that files located at "http://127.0.0.1:8000/js/app.ts" and "http://localhost:35729/livereload.js" could not be loaded.
Here are the files I modified:
// webpack.mix.js
const LiveReloadPlugin = require('webpack-livereload-plugin');
mix.ts('resources/js/app.ts', 'public/js')
.vue();
mix.webpackConfig({
plugins: [new LiveReloadPlugin()]
})
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node",
},
"include": [
"resources/js/**/*"
]
}
// resources/js/app.ts
import { createApp } from 'vue';
import App from './components/App.vue'
createApp(App)
.mount('#app');
// resources/shims-vue.d.ts
declare module "*.vue" {
import { ComponentOptions } from "vue";
const component: ComponentOptions;
export default component;
}
Can anyone offer some guidance on how to resolve this issue? Any suggestions would be greatly appreciated.