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?
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 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 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 }
});
I am trying to implement simple routing with official route library.
Here is my app.js
window.Vue = require('vue');
window.VueRouter= require('vue-router');
Vue.use(VueRouter);
const vt=Vue.component('example', require('./components/Example.vue'));
const router = new VueRouter({
routes:[
{
path:'/test',
component:vt
}
]
})
const app = new Vue({
el: '#app',
router:router
});
But i got an error
app.js:11256 Uncaught TypeError: VueRouter is not a constructor
This answer is for any onlookers hoping for a little more insight into the problem.
There are two solutions here.
Solution 1: ES Module Import
In Laravel's default config [at least], vue-router is expected to be imported as an es module. So, it should be done at the top of the file.
import VueRouter from 'vue-router'
Solution 2: CommonJS Require
Since vue-router router is an es module, you will have to explicitly access the default property of the CommonJS version of the module.
const VueRouter = require('vue-router').default;
Either Solution
You will have to register Vue Router with Vue.
Vue.use(VueRouter)
Based on the comments finally i resolved with this import
import VueRouter from 'vue-router';
Vue.use(VueRouter);