I had an issue upon installing vuetify to my project, I followed some solutions in some questions but still I had an issue.
Here is my vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
App.js
import Vue from 'vue';
import Vuetify from '../plugins/vuetify';
Vue.use(Vuetify);
new Vue ({
router,
vuetify : new Vuetify(),
render: h => h(App),
}).$mount('#app');
webpack.mix.js
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var webpackConfig = {
plugins: [
new VuetifyLoaderPlugin(),
new CaseSensitivePathsPlugin(),
],
}
mix.webpackConfig( webpackConfig );
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
You're close, but you're trying new up Vuetify when you should just be passing it in like this:
new Vue ({
router,
vuetify: Vuetify, // <-- simply set it like this
render: h => h(App),
}).$mount('#app');
Related
I'm using laravel + vue to build my site, I'm using vue18n for localization.
my app.js file is:
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue';
import App from './components/App.vue';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router';
import axios from 'axios';
import { routes } from './routes';
import VueI18n from 'vue-i18n';
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
Vue.use(VueI18n);
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router,
render: h => h(App),
});
in my newarticle.vue:
<p>{{$t('message')}}</p>
and I created a folder (locales) , in this folder I have two files (en.json) and (ar.json).
but this problem appear:
TypeError: Cannot read property '_t' of undefined
at Proxy.Vue.$t (app.js:37834)
at Proxy.render (app.js:40051)
at VueComponent.Vue._render (app.js:47261)
at VueComponent.updateComponent (app.js:47779)
at Watcher.get (app.js:48192)
at new Watcher (app.js:48181)
at mountComponent (app.js:47786)
at VueComponent.Vue.$mount (app.js:52763)
at VueComponent.Vue.$mount (app.js:55672)
at init (app.js:46834)
can you help me, please
I'm tri to use vue i18n in my project Laravel / Vue but I have this error message
warning in ./resources/js/plugins/i18n.js
"export 'default' (imported as 'VueI18n') was not found in 'vue-i18n'
This is my app.js :
import Vue from 'vue';
import vuetify from './plugins/vuetify';
import {i18n} from './plugins/i18n'
document.body.setAttribute('data-app', true)
Vue.component('equipe-component', require('./components/Researchteam.vue').default);
Vue.component('atlas-component', require('./components/Atlas.vue').default);
const app = new Vue({
el: '#app',
vuetify,
i18n,
});
This is my plugins/i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export const i18n = new VueI18n({
fallbackLocale: 'en',
locale: 'fr',
messages: {
fr: {
messages: "Hello"
},
en: {
messages: "bonjour"
}
}
})
I'm trying to use Vue on my laravel project.
And import vuetify for that project.
But it appends all css inline on the project.
My app.js is avobe:
window.Vue = require('vue');
//import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import {store} from './store/store'
import vuetify from './plugins/vuetify' // path to vuetify export
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
import Master from './Master'
import router from './router'
Vue.use(VueRouter)
Vue.config.productionTip = false;
router.beforeEach((to, from, next) => {
if(to.matched.some(record => record.meta.requiresAuth)){
if(store.getters.loggedIn){
next()
}else{
next({name: 'login'})
}
}else{
if(store.getters.loggedIn){
next({name: 'dashboard'})
}else{
next()
}
}
})
// use the plugin
const app = new Vue({
el: '#app',
router: router,
store: store,
vuetify,
components: {Master},
template: "<Master />"
});
My webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
And here's the how code compiles itself:
How can I use vuetify codes on "blabla.css" file?
remove your vuetify.min.css in your app.js
and move that in your app.scss like this
#import '~vuetify/dist/vuetify.min.css';
I haven't been able to integrate vuetify 2 successfully into a fresh installation of laravel. I understand that I have to install the vuetify-loader manually through webpack config since I'm not using Vue CLI 3. How do I do this in a laravel app?
I have tried modifying webpack config through webpack.mix.js by using code suggested by the vuetify documentation.
my webpack.mix.js looks like this:
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()
]
};
});
I have also tried changing APP_ENV in the .env file from "local" to "production".
When I npm run watch, I get this error:
/vuetifyapp/node_modules/webpack-cli/bin/cli.js:93
throw err;
^
Error: Cannot find module 'vuetify-loader/lib/plugin'
Some how I managed to integrate can't remember how. Hope this will help you.
https://github.com/avgkudey/LaraVuetify
After installing vuetify, you should upload / install your dependences, try to do :
npm install
And try after :
npm run watch
It should works
Just install the package:
npm install vuetify-loader -D
I made a gist with the files you need to change to a Laravel app to add a SPA environment using Vue. It will be a similar configuration to a Vue-CLI environment and you can install npm packages like vuetify normally.
basically you need to config these 4 files:
resources/js/app.js;
resources/js/App.vue;
resources/views/welcome.blade.php;
routes/web.php;
The 4 files are in here:
https://gist.github.com/marcelobbfonseca/9d1156ab3633793b765456c6a1f44bbc
If following this configuration your vue files will be in resources/js/ directory and you can run npm install vuetify. Add your vuetify.js file in resources/js/vuetify.js
This is an example vuetify.js config
resources/js/app.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')
resources/js/vuetify.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'
}
}
}
})
I wrote a short medium article for this environment configuration and unit testing
After many issues, I solve this on Laravel 8. Add to the v-app tag on component.
// resources/js/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
// 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',
});
// 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",
}
// 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();
};
// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
plugins: [
new VuetifyLoaderPlugin(),
]
};
Im trying to study Laravel with VueJS using Homestead. I decided to use Vuetify in my study instead of Bootstrap by installing it throughnpm.
Here is my app.js:
import "material-design-icons-iconfont/dist/material-design-icons.css";
import "vuetify/dist/vuetify.min.css";
import Vue from "vue";
import Vuetify from "vuetify";
import App from "./components/App.vue";
import ExampleComponent from './components/ExampleComponent.vue';
import VueRouter from "vue-router";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(Vuetify, VueRouter, axios, VueAxios);
const routes = [
{ path: "/", name: "Dashboard", component: ExampleComponent }
];
const router = new VueRouter({ mode: "history", routes: routes, linkExactActiveClass: "active" });
new Vue(Vue.util.extend({ router }, App)).$mount("#app");
But in my console log I'm getting this error:
Source map error: SyntaxError: JSON.parse: unexpected character at
line 1 column 1 of the JSON data Resource URL: http://xcy.dv/js/app.js
Source Map URL: vuetify.js.map
What am I missing here? I'm new to VueJS
By the help of Vuetify community, I found out that I need to include .sourceMaps() in my webpack.mix.js like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').sourceMaps();
It basically enable the source maps since it's disabled by default.
I had to update webpack.mix.js with
mix.webpackConfig({
output: {
chunkFilename: mix.inProduction() ? "js/prod/chunks/[name]?id=[chunkhash].js" : "js/dev/chunks/[name].js"
},
devtool: 'source-map' // Notice this
}).sourceMaps(); // And this
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');