I am trying to install VueJS in Laravel 8. If I run npm run dev command I am getting below error.
My prayer_time.vue file is like below.
<template>
<div>Welcome</div>
</template>
<script>
export default {
mounted() {
console.log("Example component mounted");
}
};
</script>
My package.json file is like below.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#popperjs/core": "^2.10.2",
"axios": "^0.21",
"bootstrap": "^5.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue": "^2.6.12",
"vue-loader": "^16.8.3",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"vue": "^3.2.45"
}
}
How can I run VueJS in laravel ?
Related
So I get the following Error whenever I compile for production:
But this only happens when compiling for prod, if I run: npm run dev. My app just runs like normal. The project is a ver old and there are not many dependencies I can update. I don't even know where to start debugging,
Here's the package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development NODE_OPTIONS=--max-old-space-size=8096 node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js ",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"ajv": "^6.0.0",
"axios": "^0.21.4",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.21.2",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.2.2",
"cross-env": "^5.2.1",
"imagemin": "^5.0.0",
"jquery": "^3.5.1",
"laravel-mix": "^2.0",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"vanillatoasts": "^1.4.0",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12",
"vue2-transitions": "^0.3.0",
"vuex": "^3.6.2"
},
"dependencies": {
"#vue/composition-api": "^1.7.1",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^1.0.0",
"clipboard-polyfill": "^3.0.1",
"modal-video": "^2.4.8",
"moment": "^2.27.0",
"natives": "^1.1.6",
"node-sass": "^5.0.0",
"randomcolor": "^0.6.2",
"signature_pad": "^3.0.0-beta.4",
"v-wave": "^1.2.8",
"vue-carousel": "^0.18.0",
"vue-chartjs": "^3.5.1",
"vue-disable-autocomplete": "0.0.4",
"vue-randomcolor": "^1.0.4",
"vue-recaptcha": "^2.0.3",
"vue-router": "^3.5.1",
"vue-search-select": "^2.9.5",
"vue-select": "^3.12.1",
"vue-slick-carousel": "^1.0.6",
"vuejs-datepicker": "^1.6.2"
}
}
Any help will be appreciated.
I have done everything in accordance with the docs.
I installed storybook, and then I changed the config file the way they say has to be done to make storybook work on Vite, which supports the element-plus library.
.storybook/main.js:
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: ['#storybook/addon-links', '#storybook/addon-essentials'],
core: {
builder: '#storybook/builder-vite', // 👈 The builder enabled here.
},
}
Package.json:
{
"name": "elementui-practice",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"element-plus": "^2.2.17",
"node-sass": "^7.0.3",
"sass-loader": "^13.0.2",
"vue": "^3.2.38"
},
"devDependencies": {
"#babel/core": "^7.19.1",
"#storybook/addon-actions": "^6.5.12",
"#storybook/addon-essentials": "^6.5.12",
"#storybook/addon-interactions": "^6.5.12",
"#storybook/addon-links": "^6.5.12",
"#storybook/builder-vite": "^0.2.2",
"#storybook/testing-library": "^0.0.13",
"#storybook/vue3": "^6.5.12",
"#vitejs/plugin-vue": "^3.0.3",
"babel-loader": "^8.2.5",
"eslint": "^8.23.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-storybook": "^0.6.4",
"eslint-plugin-vue": "^9.5.1",
"sass": "^1.55.0",
"vite": "^3.0.9",
"vue-cli-plugin-storybook": "~2.1.0",
"vue-loader": "^16.8.3"
}
}
If I run only the element-plus (npm run dev), the library works.
If I run npm run storybook, element-plus styles are not applied to the components or elements. Normal css works, but element-plus components and styles do not work.
Add these code to storybook's preview.js
import { app } from '#storybook/vue3'; //I use Vue3
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
app.use(ElementPlus);
I'm trying to add a package on my project called pretty-checkbox-vue I followed its instruction but it seemed it did not work. The documentation said I need to add the SCSS file so I did
this is my code on vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `
#import '~pretty-checkbox/src/pretty-checkbox.scss';
`
}
}
}
};
and this my package.json
{
"name": "janu-form-generator",
"version": "1.0.0",
"description": "",
"main": "dist/janu-form-generator.ssr.js",
"browser": "dist/janu-form-generator.esm.js",
"module": "dist/janu-form-generator.esm.js",
"unpkg": "dist/janu-form-generator.min.js",
"files": [
"dist/*",
"src/**/*.vue"
],
"sideEffects": false,
"scripts": {
"serve": "vue-cli-service serve dev/serve.js",
"prebuild": "rimraf ./dist",
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
"build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
"build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
},
"dependencies": {
"pretty-checkbox-vue": "^1.1.9",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-scss": "^3.0.0",
"sass": "^1.49.8",
"sass-loader": "^10.1.1",
"vuetify": "^2.6.3"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#rollup/plugin-alias": "^3.1.2",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^14.0.0",
"#rollup/plugin-node-resolve": "^9.0.0",
"#rollup/plugin-replace": "^2.4.2",
"#vue/cli-plugin-babel": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"cross-env": "^7.0.3",
"minimist": "^1.2.5",
"rimraf": "^3.0.2",
"rollup": "^2.52.8",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"vue": "^2.6.14",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"peerDependencies": {
"vue": "^2.6.14"
},
"engines": {
"node": ">=12"
}
}
the problem that I'm experiencing is that the look of the radio input and checkbox did not change
In my laravel 5. Vuejs 2, Vuex 3 app I got warning in my console:
Arguments:
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: function Vue (options) {
if (!(this instanceof Vue)) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}, _f: undefined, _strict: undefined, _locale: [object Object]
Error
at Function.createFromInputFallback (http://local-hostels2.com/js/app.js?dt=1559733588:58205:98)
at configFromInput (http://local-hostels2.com/js/app.js?dt=1559733588:60508:19)
at prepareConfig (http://local-hostels2.com/js/app.js?dt=1559733588:60479:13)
at createFromConfig (http://local-hostels2.com/js/app.js?dt=1559733588:60446:44)
at createLocalOrUTC (http://local-hostels2.com/js/app.js?dt=1559733588:60533:16)
at createLocal (http://local-hostels2.com/js/app.js?dt=1559733588:60537:16)
at hooks (http://local-hostels2.com/js/app.js?dt=1559733588:57897:29)
at Function.Vue.use (http://local-hostels2.com/js/app.js?dt=1559733588:108861:14)
at Module../resources/js/app.js (http://local-hostels2.com/js/app.js?dt=1559733588:117240:44)
at __webpack_require__ (http://local-hostels2.com/js/app.js?dt=1559733588:20:30)
composer.json :
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": [
"framework",
"laravel"
],
"license": "MIT",
"require": {
"php": "^7.1.3",
"fideloper/proxy": "^4.0",
"fzaninotto/faker": "^1.8",
"intervention/image": "^2.4",
"laracasts/utilities": "^3.0",
"laravel/framework": "5.7.*",
"laravel/tinker": "^1.0",
"orangehill/iseed": "^2.6",
"pusher/pusher-php-server": "^3.4",
"tymon/jwt-auth": "^1.0.0",
"wboyz/laravel-enum": "^0.2.1",
"zizaco/entrust": "^1.9"
},
"require-dev": {
"beyondcode/laravel-dump-server": "^1.0",
"beyondcode/laravel-query-detector": "^1.0",
"filp/whoops": "^2.0",
"mockery/mockery": "^1.0",
"nunomaduro/collision": "^2.0",
"phpunit/phpunit": "^7.0",
"xethron/migrations-generator": "^2.0"
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"autoload": {
"psr-4": {
"App\\": "app/"
},
"classmap": [
"database/seeds",
"database/factories"
]
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"minimum-stability": "dev",
"prefer-stable": true,
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"#php artisan package:discover --ansi"
],
"post-root-package-install": [
"#php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"#php artisan key:generate --ansi"
]
}
}
My package.json :
{
"private": true,
"scripts": {
"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",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.4.0",
"laravel-mix": "^4.0.15",
"lodash": "^4.17.5",
"popper.js": "^1.15.0",
"resolve-url-loader": "^2.3.2",
"sass": "^1.19.0",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"font-awesome": "^4.7.0",
"laravel-echo": "^1.5.3",
"marked": "^0.6.2",
"moment": "^2.24.0",
"pusher-js": "^4.4.0",
"vee-validate": "^2.2.5",
"vee-validate-laravel": "^1.1.0",
"vue-carousel": "^0.18.0",
"vue-color": "^2.7.0",
"vue-focus": "^2.1.0",
"vue-form-wizard": "^0.8.4",
"vue-js-modal": "^1.3.28",
"vue-jstree": "^2.1.6",
"vue-moment": "^4.0.0",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.16",
"vue-router": "^3.0.6",
"vue-select": "^2.6.4",
"vue-wysiwyg": "^1.7.2",
"vue2-filters": "^0.6.0",
"vuejs-paginate": "^2.1.0",
"vuex": "^3.1.0"
}
}
Actually momentjs is not installed/used in my app, that can be checked in config files above.
It seems not critical now, but I would like to fix it anyway...
Can you please give a hint what could raise this warning and how to fix it?
Thanks!
Well, are you sure you don't use the vue-moment plugin in your code? We can read "vue-moment": "^4.0.0", in your packages.json file. I don't have access to your code but I imagine you're using it somewhere in your code. In your error, we can read arguments that contains _isAMomentObject: true... It should be somewhere a moment object.
I have an existing Laravel app and for part of the app, I'm using Laravel Mix. I have 6 single file components with the CSS inside the Vue file. My largest Vue file is 41KB, but the rest are 10-17kb each.
I'm using Laravel Mix to bundle the js inside webpack.mix.js : mix .js('resources/assets/js/app.js', 'dist/js'). My development app size is 767kb and my production bundle size is 265kb. Im trying to reduce the production app size, since it's just handling my vue files (js/CSS) so I'm not sure why it's so large.
package.json:
{
"private": true,
"scripts": {
"dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18.0",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"laravel-mix": "^4.0.14",
"lodash": "^4.16.2",
"resolve-url-loader": "^2.3.1",
"sass": "^1.17.2",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6"
},
"dependencies": { }
}
Do you have any ideas? 260kb feels like a lot for this.