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 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');
How can I work with bootstrap-vue on Laravel, using Laravel 8, Jetstream and InertiaJS?
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
I don't know where and how to add the app.js file.
app.js:
require('./bootstrap');
// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
const el = document.getElementById('app');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
InertiaProgress.init({ color: '#4B5563' });
This is my css.js.
Here add the CSS libraries.
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import 'bootstrap/dist/css/bootstrap.css';
#import 'bootstrap-vue/dist/bootstrap-vue.css';
As I can see from your configuration. You are using InertiaJS with Vue3. Right now, BootStrap-Vue components only works with Vue2 (info). So you need first to downgrade InertiaJS from Vue3 to Vue2. With npm
npm uninstall #inertiajs/inertia-vue3 vue #vue/compiler-sfc vue-loader
npm install #inertiajs/inertia-vue vue vue-template-compiler vue-loader
It seems weird to uninstall and reinstall vue and vue-loader, but is the easiest way to properly update the dependencies.
Now you need to put in your app.js.
import Vue from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue';
import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);
createInertiaApp({
resolve: (name) => require(`./Pages/${name}`),
setup({ el, app, props }) {
new Vue({
render: (h) => h(app, props),
}).$mount(el);
}
});
The app.css does not need any modification. Unless you need to modify and theme Bootstrap, in that case you must change to SASS.
I am new a vue and vuetify, I need to upgrade vuetify v1.5 to v2.1.3. I read documentatıon but ı can't fixed this error :
https://imguploads.net/image/tGzZv
This is my app.vue code :
<style lang="sass">
#import '../node_modules/vuetify/src/styles/main.sass';
</style>
This is my main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import VueResource from 'vue-resource'
import '../src/assets/css/custom.css'
import { i18n } from '#/plugins/i18n'
import '../node_modules/vuetify'
Vue.use(Vuetify)
Vue.use(VueResource)
import auth from '../src/api/auth'
auth.checkAuth()
Vue.router = router
Vue.config.productionTip = false
new Vue({
vuetify: new Vuetify(opts),
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
you don't need to import this in app.vue
<style lang="sass">
#import '../node_modules/vuetify/src/styles/main.sass';
</style>
I have been strugling for a few hours trying to install Vuetify in my laravel project but I cannot make it work correctly, the Vuetify components are working well but Icons and breakpoints are not, I tried everything and now Im kinda tired of this, I hope someone can help me...
Following the vuetify documentation I wrote this in my app.js
require('./bootstrap');
import Vue from 'vue';
import Vuex from 'vuex';
import router from './router'
import vuetify from './plugins/vuetify.js' // path to vuetify export
Vue.use(Vuex);
new Vue({
vuetify,
router,
}).$mount('#app')
and separately, a vuetify.js file
import '#mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
})
and added the vuetify-loader to my webpack.mix.js
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
new VuetifyLoaderPlugin(),
]
}).sourceMaps();
mix.disableSuccessNotifications();
First of all, having this configuration the project wont even run, I get this error: "Error: Conflict: Multiple assets emit to the same filename fonts/vendor/#mdi/materialdesignicons-webfont.eot?a32fa1f27abbfa96ff2f79e1ade723d5"
So I removed the import "#mdi/font/css/materialdesignicons.css" from the vuetify.js file, no errors but the icons are not visible.
I took the code from the documentation of Toolbar and pasted in my project and this is how it looks
This is the code for that empty toolbar
<template>
<v-card
color="grey lighten-4" flat height="200px" tile>
<v-toolbar dense>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</template>
If I change iconfont from 'mdi' to 'mdiSvg' from the vuetify.js file I do get one icon but the others still missing
According to the documentation, this toolbar should look something like this:
but that's not it yet, I cannot even use vuetify breakpoints like $vuetify.breakpoint.smAndUp I get an undefined error in console
Using Vuetify with Laravel differs a little bit from the the documentation. and depends on Vuetify version and here how to install it for the last two versions
Vutify v1.5.x
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify); // to access $vuetify inside your Vue components
A little bit different in Vuetify v2.0.x
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
const app = new Vue({
vuetify: new Vuetify(), // to access $vuetify inside your Vue components
});
You can also if you like add vuetify.min.css inside app.scss file inside resources/sass folder along with material icons as follows:
// /resources/sass/app.scss
// Fonts
#import '~#mdi/font/css/materialdesignicons.min.css';
// Vuetify
#import '~vuetify/dist/vuetify.min.css';
go to the vuetifyjs website treeshaking method it is the best way!
https://vuetifyjs.com/en/getting-started/installation/
like the bellow!
import Vuetify, {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
} from 'vuetify/lib'
import fa from 'vuetify/lib/locale/fa'
Vue.use(Vuetify, {
components: {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
},
});
new Vue({
el: '#yourappid',
router: router,
render: h => h(App),
vuetify: new Vuetify({
rtl: true,
lang: {
locales: { fa },
current: 'fa',
},
}),
data() {
return {
breadcrumbs: [],
sidebarBg: "deep-purple"
}
}
});