I have been working with Nuxt.js on my Laravel project. Combining them was a necessary step since they each come with their own boilerplate during installation into the project.
I managed to make almost everything work smoothly until I encountered an issue where my welcome.blade.php needed to read my index.vue component located in the resources/nuxt/pages folder.
The current problem I am facing is an "unexpected identifier on line 1 of my public/App.js" file when trying to import Vue.
Import Vue from 'vue'
To compile things, I modified my yarn run dev-nuxt script in the package.json file (simplified | more details available upon request)
{
"private": true,
"scripts": {
"dev-nuxt": "nuxt",
},
Prior to that, I used to run yarn run dev
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
This would refer to webpack.mix.js. When running yarn run dev, my terminal showed errors like:
Module not found: Error: Can't resolve '~/components/Logo.vue' in 'C:\Users\Owner\Documents\META+LAB\iSTART\resources\pages'
@ ./resources/pages/index.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/pages/index.vue?vue&type=script&lang=js&) 28:0-41 32:10-14
@ ./resources/pages/index.vue?vue&type=script&lang=js&
@ ./resources/pages/index.vue
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/assets/app.scss
I also noticed that my webpack.mix.js did not include references to my nuxt.config.js (simplified | more details available upon request)
const pkg = require('./package')
const path = require('path');
module.exports = {
mode: 'spa',
/*
** srcDir points to where nuxt will be compiled by yarn nuxt-dev
*/
srcDir: 'resources/',
/*
** buildDir is where my nuxt code will be compiled to
*/
buildDir: 'public/js/',
** Nuxt.js modules
*/
modules: [,
// Doc: https://bootstrap-vue.js.org/docs/
'bootstrap-vue/nuxt',
'nuxt-babel'
],
This file refers to my .babelrc, which should compile my vue into my App.js (simplified | more details available upon request)
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"@nuxt/babel-preset-app"
]
}
}
}
So I'm uncertain about why this error is occurring. Could it be due to incorrect setup in either my nuxt.config.js or my .babelrc?
Here is how my welcome.blade.php looks like:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<index></index>
</div>
<script src="/js/App.js"></script>
</body>
</html>
When compiling nuxt with yarn run dev-nuxt, as specified in my package.json, I can see my index.vue component perfectly on a certain port, but I cannot access this component when running php artisan serve.
I suspect that there might be some misconfiguration or additional packages that need to be installed.
For your reference, here is my complete package.json:
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.27",
"axios": "^0.18",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jest": "^23.6.0",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"nodemon": "^1.18.9",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.6.2",
"vue-jest": "^3.0.2"
},
"dependencies": {
"@babel/core": "^7.2.2",
"babel-loader": "^8.0.5",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"cross-env": "^5.2.0",
"node-sass": "^4.11.0",
"nuxt": "^2.4.0",
"vue-loader": "^15.6.2"
}