Je n'ai pas réussi à intégrer vuetify 2 avec succès dans une nouvelle installation de laravel. Je comprends que je dois installer le vuetify-loader manuellement via la configuration de webpack car je n'utilise pas Vue CLI 3. Comment puis-je faire cela dans une application laravel?
J'ai essayé de modifier la configuration de webpack via webpack.mix.js en utilisant le code suggéré par la documentation vuetify.
mon webpack.mix.js ressemble à ceci:
const mix = require('laravel-mix');
//MYCODE
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
//MYCODE
.webpackConfig(webpack => {
return {
plugins: [
new VuetifyLoaderPlugin()
]
};
});
J'ai également essayé de changer APP_ENV dans le fichier. env depuis "local" vers "production".
Quand je lance watch, j'obtiens cette erreur:
/vuetifyapp/node_modules/webpack-cli/bin/cli.js : 93 jeter err; ^ Erreur: impossible de trouver le module 'vuetify-loader / lib / plugin'
5 Réponses :
Après avoir installé vuetify, vous devez télécharger / installer vos dépendances, essayez de faire:
npm run watch
Et essayez après:
npm install
Il devrait fonctionner
Bonsoir Vincent,
Bonsoir Vincent, j'ai essayé et cela fonctionne bien pour l'ancienne version de Vuetify mais pas pour la nouvelle version 2. Comme je n'arrive pas à installer vuetify-loader de v2 pour travailler avec Laravel, j'importe simplement chaque composant depuis le Framework Vuetify manuellement dans le fichier plugins / vuetify.js. Merci quand même.
Certaines méthodes que j'ai réussi à intégrer ne me souviennent pas comment. J'espère que cela vous aidera.
Installez simplement le package:
npm install vuetify-loader -D
J'ai fait un résumé des fichiers que vous devez changer en une application Laravel pour ajouter un environnement SPA en utilisant Vue . Ce sera une configuration similaire à un environnement Vue-CLI et vous pouvez installer des packages npm comme vuetify normalement.
En gros, vous devez configurer ces 4 fichiers: p>
Les 4 fichiers sont ici:
https://gist.github.com/marcelobbfonseca/9d1156ab3633793b765456c6a
Si vous suivez cette configuration, vos fichiers vue seront dans le répertoire resources / js / et vous pouvez exécuter npm install vuetify . Ajoutez votre fichier vuetify.js dans resources/js/vuetify.js
Ceci est un exemple de configuration vuetify.js
resources/js/app.js
import Vue from 'vue'
import Vuetify from "vuetify"
import ptBr from './locale/ptBr.ts'
import 'vuetify/dist/vuetify.min.css'
import '@fortawesome/fontawesome-free/css/all.css'
Vue.use(Vuetify)
export default new Vuetify({
lang: {
locales: { ptBr },
current: 'ptBr',
},
icons: {
iconfont: 'fa'
},
theme: {
themes: {
light: {
primary: '#00551E',
secondary: '#3C8750',
tertiary: '#EEEEEE',
accent: '#69FFF1',
info: '#63D471',
success: '#4CAF50',
warning: '#FFC107',
error: '#FF5252',
danger: '#FF5252',
},
dark: {
primary: '#321321'
}
}
}
})
resources / js / vuetify.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './vuetify'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
Vue.config.productionTip = false
const app = new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
J'ai écrit un court article moyen pour la configuration de cet environnement et les tests unitaires
Après de nombreux problèmes, je résous ceci sur Laravel 8. Ajoutez à la balise v-app sur le composant.
// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
plugins: [
new VuetifyLoaderPlugin(),
]
};
// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
// scss
const scssRule = webpackConfig.module.rules.find(
rule =>
String(rule.test) ===
String(/\.scss$/)
);
scssRule.oneOf.forEach(o => {
const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
scssOptions.prependData = '@import "./resources/sass/_variables.scss";'
})
// sass
const sassRule = webpackConfig.module.rules.find(
rule =>
String(rule.test) ===
String(/\.sass$/)
);
sassRule.oneOf.forEach(o => {
const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
scssOptions.prependData = '@import "./resources/sass/_variables.scss"'
})
})
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/gift.js', 'public/js')
.vue()
.sass('resources/sass/pages/home.scss', 'public/css')
.sass('resources/sass/pages/gift.scss', 'public/css')
.webpackConfig(Object.assign(webpack))
.copyDirectory('resources/images/', 'public/images');
if (mix.inProduction()) {
mix.version();
};
// Dependencies
{
"laravel-mix": "^6.0.6",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.10",
"vuetify": "^2.4.3",
"vuetify-loader": "^1.7.1",
}
// resources/js/app.js
window.Vue = require('vue').default
import vuetify from './vuetify'
import store from './store/store'
Vue.component('g-home', require('./components/pages/GHome.vue').default)
const app = new Vue({
store,
vuetify,
el: '#app',
});
// resources/js/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Je pense que c'est un doublon de ceci .