How to install Vuetify with Laravel8 Vue3 app - laravel

I am currently creating a Todo app in Laravel 8 + Vue3.
I have attempted to install Vuetify to get the design right, but it does not work.
According to my research, Vuetify is not supported in Vue3, is it not available in vue3?
The following is the error log.
PS C:\Users\shozo\Documents\programming\laravel-todolist\todolist\todolist_app> npm install vuetify
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: vue#3.2.45
npm ERR! node_modules/vue
npm ERR! vue#"^3.2.31" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^2.6.4" from vuetify#2.6.12
npm ERR! node_modules/vuetify
npm ERR! vuetify#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\shozo\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\shozo\AppData\Local\npm-cache\_logs\2022-11-20T12_39_49_817Z-debug-0.log
Here is my development environment
Laravel Framework 8.83.8
todolist_app# C:\Users\shozo\Documents\programming\laravel-todolist\todolist\todolist_app
├─┬ #fortawesome/vue-fontawesome#3.0.0-5
│ └── vue#3.2.31 deduped
└─┬ vue#3.2.31
└─┬ #vue/server-renderer#3.2.31
└── vue#3.2.31 deduped
PHP 8.1.2 (cli) (built: Jan 19 2022 10:18:23) (ZTS Visual C++ 2019 x64)
Copyright (c) The PHP Group
Zend Engine v4.1.2, Copyright (c) Zend Technologies
PS C:\Users\shozo\Documents\programming\laravel-todolist\todolist\todolist_app> npm -v
8.5.0
I want to use vuetify in my current project
If I can't, I will re-create it with vue version 2.

Vuetify has very recently released v3.0.0 which does support VueJS 3.
In order to install the very latest version of Vuetify 3 from npm, use the package found under #vuetify/nightly. At the time of writing this latest nightly version can be installed using the following command:
npm i #vuetify/nightly#3.0.2
You can check other versions of the package here.

Related

why instaling type-graphql, #apollo/server and graphql together showing dependency error

I have been trying to install typegraphql with apollo/server in typescript node template but it showing dependency error, I don't know why all new version is not compatible with each other.
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: server#1.0.0
npm ERR! Found: graphql#16.6.0
npm ERR! node_modules/graphql
npm ERR! graphql#"*" from the root project
npm ERR! peer graphql#"^16.6.0" from #apollo/server#4.3.0
npm ERR! node_modules/#apollo/server
npm ERR! #apollo/server#"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! type-graphql#"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: graphql#15.8.0
npm ERR! node_modules/graphql
npm ERR! peer graphql#"^15.3.0" from type-graphql#1.1.1
npm ERR! node_modules/type-graphql
npm ERR! type-graphql#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
$ npm i #apollo/server express graphql reflect-metadata type-graphql
should forcing it works or will it lead to data-leaks and all?
Thanks in advance for replying
The most recent version of type-graphql only works with graphql version ^15.5.0. Almost all newer versions of #apollo/server and graphql-related libraries, on the other hand, only support graphql version >= 16.
Fortunately, a newer version of type-graphql (version 2.0.0), which is still in beta, is available under the next tag version in npm.
To install it, first uninstall type-graphql and then reinstall it specifying the next tag:
npm uninstall type-graphql
npm install type-graphql#next
PS: If you want to look at a working example project, check out this.

Laravel 9 Install vue router for vue 2.6.12

I try installing vue router with run command "npm install vue-router" but then showing error like this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: vue#2.6.14
npm ERR! dev vue#"^2.6.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^3.2.0" from vue-router#4.0.14
npm ERR! node_modules/vue-router
npm ERR! vue-router#"*" from the root project
npm ERR!
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\ACER\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ACER\AppData\Local\npm-cache_logs\2022-03-20T12_19_15_072Z-debug-0.log
please help
I solved it by installing vue-router#3.
npm install vue-router#3 --save
You can just try this.
Because your vue is not the latest version, it gives this error.
Use previous versions of vue-router.
To access old versions of vue-router, use the versions tab
Example : npm i vue-router#3.5.3

Laravel8 npm run dev outputs: ERESOLVE unable to resolve dependency tree

Goal
Avoid error message.
I have been getting the following error message when I run the command npm run dev:
npm notice
npm notice New major version of npm available! 7.6.1 -> 8.1.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.4
npm notice Run npm install -g npm#8.1.4 to update!
npm notice
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: acorn#7.4.1
npm ERR! node_modules/acorn
npm ERR! acorn#"^7.0.0" from acorn-node#1.8.2
npm ERR! node_modules/acorn-node
npm ERR! acorn-node#"^1.6.1" from detective#5.2.0
npm ERR! node_modules/detective
npm ERR! detective#"^5.2.0" from tailwindcss#2.2.19
npm ERR! node_modules/tailwindcss
npm ERR! dev tailwindcss#"^2.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional acorn#"^8.5.0" from terser#5.10.0
npm ERR! node_modules/terser
npm ERR! terser#"^5.9.0" from laravel-mix#6.0.39
npm ERR! node_modules/laravel-mix
npm ERR! dev laravel-mix#"^6.0.6" from the root project
npm ERR! terser#"^5.7.2" from terser-webpack-plugin#5.2.5
npm ERR! node_modules/terser-webpack-plugin
npm ERR! terser-webpack-plugin#"^5.2.4" from laravel-mix#6.0.39
npm ERR! node_modules/laravel-mix
npm ERR! dev laravel-mix#"^6.0.6" from the root project
npm ERR! 1 more (webpack)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/ml/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ml/.npm/_logs/2021-12-02T07_41_55_149Z-debug.log
Quick Solution:
I can avoid the problem / error message with the following command:
npm install --legacy-peer-deps.
Output:
npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
added 807 packages, and audited 808 packages in 12s
84 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Question
What do I have to do to run npm install again without getting the error message?
I have the same issue too. I have fixed it using this line
npm i acorn --dev
then run again
npm install && install run dev
npm install npm#latest -g
then
npm install webpack-dev-server --save-dev
working for me
If you are using Laravel Homestead Package for any Vagrant Environment, then don't run the command inside the Vagrant Project Directory.
Go outside to the local directory of the project and run these commands.
image of commands inside vagrant
You should run these here::
image of commands outside vagrant

Laravel Tailwind authentication scaffolding issue

So I am currently playing around with Laravel and Tailwind. I have created a project and working through some initial views. The next to do was to add auth scaffolding to the project.
I tried Googling around, found https://aregsar.com/blog/2020/create-laravel-project-with-tailwind-ui-and-auth/. I also checked a couple of other results which had the same pointers.
So when I run composer require laravel-frontend-presets/tailwindcss --dev, no problems. Next up I run the following.
php artisan ui tailwindcss --auth
Tailwind CSS scaffolding installed successfully.
Tailwind CSS auth scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
No issues...however, when I try and run npm install, I get the following...
npm install && npm run dev
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency
tree npm ERR! npm ERR! While resolving: undefined#undefined npm ERR!
Found: tailwindcss#2.2.7 npm ERR! node_modules/tailwindcss npm ERR!
dev tailwindcss#"^2.2.6" from the root project npm ERR! npm ERR! Could
not resolve dependency: npm ERR! peer tailwindcss#"^1.3.3" from
#tailwindcss/ui#0.3.1 npm ERR! node_modules/#tailwindcss/ui npm ERR!
dev #tailwindcss/ui#"^0.3" from the root project npm ERR! npm ERR! Fix
the upstream dependency conflict, or retry npm ERR! this command with
--force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See
/home/tam/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in: npm ERR!
/home/xxx/.npm/_logs/2021-07-26T19_33_44_249Z-debug.log
Stuck here. It's a pity as I prefer Tailwind to Bootstrap.
#tailwindcss/ui is no longer needed. Uninstall the #tailwindcss/ui package.
npm uninstall #tailwindcss/ui
Install latest dependencies for Laravel Mix, Autoprefixer, and PostCSS.
npm install -D laravel-mix#latest postcss#latest
autoprefixer#latest tailwindcss#latest
Finally, make sure the line...
require('#tailwindcss/ui'),
Is removed from your tailwind.config.js file.
Continue on with your compilation.
npm install && npm run dev

I am getting a compilation error when I try to deploy my Phoenix Elixir app to Heroku

I am very unfamiliar with the deployment process and how to interpret the build log on Heroku. I'm trying to deploy my Phoenix Elixir app and have gone through the process as outlined on https://hexdocs.pm/phoenix/heroku.html. However, I am get the following error in my build logs:
npm ERR! Linux 4.4.0-1062-aws
npm ERR! argv "/tmp/build_cb2fdf13a1883f06eae3f7c5297f7b64/.heroku/node/bin/node" "/tmp/build_cb2fdf13a1883f06eae3f7c5297f7b64/.heroku/node/bin/npm" "run" "deploy"
npm ERR! node v6.9.2
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! # deploy: `webpack --mode production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # deploy script 'webpack --mode production'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --mode production
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /tmp/build_cb2fdf13a1883f06eae3f7c5297f7b64/assets/npm-debug.log
I've updated to the latest version of node.js and npm as the logs suggested.
Thanks!
The issue isn't with the version of node that you have locally. If you look at the logs it shows that heroku is trying to use node v6.9.2. That is a really old version of node that won't work. You need to use heroku-buildpack-phoenix-static so that you can define the node version the heroku is trying to use. Add the buildpack with the cli:
$ heroku buildpacks:add https://github.com/gjaldon/heroku-buildpack-phoenix-static.git
Then create a file phoenix_static_buildpack.config in your project root directory. In that file define the version of node to use:
node_version=12.18.1
This will tell heroku to use that version of node. After that try to redeploy and the issue should be resolved.
If you have more issues then check out the phoenix docs on deploying to heroku. It has a lot of useful information:
https://hexdocs.pm/phoenix/heroku.html

Resources