0

I'm trying to start a new laravel project with vue, and later on element-ui and inertia. I did laravel new <name> in the terminal in the location I wanted C:/xampp/htdocs then I opened it up in PhpStorm and did composer install and npm install. The tutorials I've seen do this and vue is already there, but not for me. In resources/js there is only app.js and bootstrap.js, when they show this folder in the tutorials it has another folder called components with an ExampleComponent.vue inside.

How can I do this?

Improve this question
0

2 Answers 2

Reset to default
1

If you are using Laravel below 6.X,

  1. choose the frontend scaffolding preset with php artisan preset vue
  2. install the required npm packages with npm install
  3. run the first build to get the frontend looking good with npm run dev

Or if you are using Laravel 6.X

  1. get the scaffolders with composer require laravel/ui
  2. choose the frontend scaffolding preset with php artisan ui vue
  3. install the required npm packages with npm install
  4. run the first build to get the frontend looking good with npm run dev
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Bash script for deploy Laravel 10 + Vue 3.

Turnkey deployment with fixed versions.

Can be used as the basis of a Docker deployment script.

#!/usr/bin/env bash

#######################
### laravel install ###
#######################

version_laravel="^10.3"
version_vue="3.4.15"
version_vue_loader="17.4.2"
version_webpack="5.90.1"
version_laravel_mix="6.0.49"
version_vitejs_vue="5.0.3"

cd "../$(dirname "$0")"
echo "COMMAND 'composer create-project laravel/laravel laravel':"
               composer create-project laravel/laravel=$version_laravel laravel
php laravel/artisan --version

echo "COMMAND 'mv laravel/* .':"  && mv    laravel/* .
echo "COMMAND 'mv laravel/.* .':" && mv    laravel/.* .
echo "COMMAND 'rmdir laravel':"   && rmdir laravel

###################
### npm install ###
###################

echo "COMMAND 'npm install':"             && npm install
echo "VERSION INSTALLED:"                 && npm -v

echo "COMMAND 'npm install vue':"         && npm install vue@$version_vue --save-dev
echo "VERSION AVAILABLE:"                 && npm info vue version
echo "VERSION INSTALLED:"                 && npm list --depth=0 | grep "vue@" | sed "s/├── //g" | sed "s/└── //g" | sed "s/vue@//g"

echo "COMMAND 'npm install vue-loader':"  && npm install vue-loader@$version_vue_loader --save-dev
echo "VERSION AVAILABLE:"                 && npm info vue-loader version
echo "VERSION INSTALLED:"                 && npm list --depth=0 | grep "vue-loader@" | sed "s/├── //g" | sed "s/└── //g" | sed "s/vue-loader@//g"

echo "COMMAND 'npm install webpack':"     && npm install webpack@$version_webpack --save-dev
echo "VERSION AVAILABLE:"                 && npm info webpack version
echo "VERSION INSTALLED:"                 && npm list --depth=0 | grep "webpack@" | sed "s/├── //g" | sed "s/└── //g" | sed "s/webpack@//g"

echo "COMMAND 'npm install laravel-mix':" && npm install laravel-mix@$version_laravel_mix --save-dev
echo "VERSION AVAILABLE:"                 && npm info laravel-mix version
echo "VERSION INSTALLED:"                 && npm list --depth=0 | grep "laravel-mix@" | sed "s/├── //g" | sed "s/└── //g" | sed "s/laravel-mix@//g"

echo "COMMAND 'npm install plugin-vue':"  && npm install @vitejs/plugin-vue@$version_vitejs_vue --save-dev
echo "VERSION AVAILABLE:"                 && npm info @vitejs/plugin-vue version
echo "VERSION INSTALLED:"                 && npm list --depth=0 | grep "@vitejs/plugin-vue@" | sed "s/├── //g" | sed "s/└── //g" | sed "s/@vitejs\/plugin-vue@//g"

############################
### resources/js/App.vue ###
############################

file_app_vue='resources/js/App.vue'

echo "CREATE FILE '$file_app_vue':"

touch resources/js/App.vue

echo "<script setup>"      > $file_app_vue
echo "</script>"          >> $file_app_vue
echo "<template>"         >> $file_app_vue
echo "    hello from Vue" >> $file_app_vue
echo "</template>"        >> $file_app_vue
echo "<script>"           >> $file_app_vue
echo "</script>"          >> $file_app_vue

###########################
### resources/js/app.js ###
###########################

file_app_js='resources/js/app.js'

echo "REPLACE FILE '$file_app_js':"

echo "import './bootstrap.mjs';"         > $file_app_js
echo "import { createApp } from 'vue';" >> $file_app_js
echo "import App from './App.vue';"     >> $file_app_js
echo "const app = createApp(App);"      >> $file_app_js
echo "app.mount('#app');"               >> $file_app_js

#########################################
### resources/views/welcome.blade.php ###
#########################################

file_welcome='resources/views/welcome.blade.php'

echo "REPLACE FILE '$file_welcome':"

echo "<!DOCTYPE html>"                                               > $file_welcome
echo "<head>"                                                       >> $file_welcome
echo "    <meta charset=\"UTF-8\">"                                 >> $file_welcome
echo "    <title>Laravel Vue</title>"                               >> $file_welcome
echo "    <script src=\"{{ asset('js/app.js') }}\" defer></script>" >> $file_welcome
echo "</head>"                                                      >> $file_welcome
echo "<body>"                                                       >> $file_welcome
echo "    <div id=\"app\">"                                         >> $file_welcome
echo "        <hello-vue />"                                        >> $file_welcome
echo "    </div>"                                                   >> $file_welcome
echo "</body>"                                                      >> $file_welcome
echo "</html>"                                                      >> $file_welcome

##################################
### resources/js/bootstrap.mjs ###
##################################

echo "RENAME FILE 'resources/js/bootstrap.js':"
mv resources/js/bootstrap.js resources/js/bootstrap.mjs

#######################
### webpack.mix.cjs ###
#######################

file_webpack='webpack.mix.cjs'

echo "CREATE FILE '$file_webpack':"

touch $file_webpack

echo "const mix = require('laravel-mix');"                         > $file_webpack
echo "const webpack = require('webpack');"                        >> $file_webpack
echo "mix.webpackConfig ({"                                       >> $file_webpack
echo "    plugins: ["                                             >> $file_webpack
echo "        new webpack.DefinePlugin({"                         >> $file_webpack
echo "            __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false" >> $file_webpack
echo "        }),"                                                >> $file_webpack
echo "    ],"                                                     >> $file_webpack
echo "})"                                                         >> $file_webpack
echo "mix.js('resources/js/app.js', 'public/js')"                 >> $file_webpack
echo "    .vue({"                                                 >> $file_webpack
echo "        version: 3,"                                        >> $file_webpack
echo "        options: {"                                         >> $file_webpack
echo "            compilerOptions: {"                             >> $file_webpack
echo "                isCustomElement: (tag) => ["                >> $file_webpack
echo "                    'x-custom-tag',"                        >> $file_webpack
echo "                ].includes(tag),"                           >> $file_webpack
echo "            }"                                              >> $file_webpack
echo "        }"                                                  >> $file_webpack
echo "    }).postCss('resources/css/app.css', 'public/css', []);" >> $file_webpack

######################
### vite.config.js ###
######################

file_vite_config='vite.config.js'

echo "REPLACE FILE '$file_vite_config':"

echo "import { defineConfig } from 'vite';"                                  > $file_vite_config
echo "import laravel from 'laravel-vite-plugin';"                           >> $file_vite_config
echo "import vue from '@vitejs/plugin-vue';"                                >> $file_vite_config
echo "export default defineConfig({"                                        >> $file_vite_config
echo "    plugins: ["                                                       >> $file_vite_config
echo "        vue(),"                                                       >> $file_vite_config
echo "        laravel({"                                                    >> $file_vite_config
echo "            input: ['resources/css/app.css', 'resources/js/app.js']," >> $file_vite_config
echo "            refresh: true,"                                           >> $file_vite_config
echo "        }),"                                                          >> $file_vite_config
echo "    ]"                                                                >> $file_vite_config
echo "});"                                                                  >> $file_vite_config

#####################
### final actions ###
#####################

echo "COMMAND 'npm run build':" && npm run build
echo "COMMAND 'npx mix':"       && npx mix

p.s. From the author and developer of min-CMS/CMF Effcore.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.