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
Related
I just wanted to add vuetify to my app, but after installing packages and setting up resources\js\app.js I have error at the runtime:
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0___default.a is undefined
This is my resources\js\app.js
import Alpine from 'alpinejs';
import { createApp } from 'vue';
import router from './router'
import { createPinia } from 'pinia'
import Vuetify from 'vuetify'
import UserName from './components/layout/UserName.vue'
import NavigationLinks from './components/layout/NavigationLinks.vue'
require('./bootstrap');
createApp({
vuetify: new Vuetify(),
components: {
UserName,
NavigationLinks,
}
})
.use(createPinia())
.use(router)
.use(Vuetify)
.mount('#app')
window.Alpine = Alpine;
Alpine.start();
In docs I see import Vue from 'vue' But it getting me an error, I use createApp
What am I doing wrong?
Vue 3, Vuetify 2.6, Laravel 9
Maybe because Vuetify doesn't suport Vue3 yet
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 noticed that while using a REST client like insomnia, I'm getting a high ms while performing a post for login.
Also my app.js is currently sitting at 2.43 MB with just these lines.
window.Vue = require('vue')
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import NProgress from 'vue-nprogress'
import 'vuetify/dist/vuetify.min.css'
import App from './App.vue'
import { router } from './routes.js'
Vue.use(Vuetify)
Vue.use(VueRouter)
Vue.use(NProgress)
Vue.component('base-table', require('./components/BaseTable.vue').default)
const vuetify = new Vuetify();
const nprogress = new NProgress();
new Vue({
el: '#app',
render: h=>h(App),
vuetify,
router,
nprogress
});
I'm fairly new with Vue + Laravel SPA and I don't know if this is considered as very bad for loading an application. Will minimizer greatly reduce the file size and boost loading speed when it's ready for production?
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 installed the prerender-spa-plugin via npm in my Laravel app that has the Vue.js app in the resources directory. How do I call the prerender-spa-plugin
in it? I have seen quite a bit examples of a standalone app but nothing that will support it in the resources directory.
To use plugin in a component only: known as local registration
<script>
import 'plugin_name' from 'plugin_directory' //located at /node_modules
//to use it in component call it like shown below
export default{
...
}
</script>
Then use it according to its application
To use it in multiple components/views. Known as global registration
In app.js import component and register it
import Plugin from 'plugin_directory'
Vue.use(Plugin)
For example. to use axios, we import it and register it globally in app.js like this
import axios from 'axios'
Vue.use(axios)
//that's it
This is how we can register multiple plugins globally in Vue in app.js
require('./bootstrap');
import Vue from 'vue'
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,axios);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
Vue.config.productionTip =false;
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
import Notifications from 'vue-notification'
Vue.use(Notifications)
import VueHolder from 'vue-holderjs';
Vue.use(VueHolder)
import App from './layouts/App'
import router from './router'
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('autocomplete', require('./components/AutoComplete.vue'));
Vue.component('topnav', require('./components/Nav.vue'));
Vue.component('imageupload', require('./components/ImageUpload.vue'));
const app = new Vue({
el: '#app',
router,
template:'<App/>',
components:{ App }
});