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>
Related
When I try to import the library using script setup it doesn't work.
<script setup>
import LaravelVuePagination from "laravel-vue-pagination";
.....
<script>
Documentation has only included importing by components
import LaravelVuePagination from 'laravel-vue-pagination';
export default {
components: {
'Pagination': LaravelVuePagination
}
}
Well I can't use the following code in template with script setup
<Pagination
style="page"
:data="supplier.data"
#pagination-change-page="pageData"
/>
</div>
the above code should work if you have installed it.
npm install laravel-vue-pagination
// or
yarn add laravel-vue-pagination
if it's already installed and it's not importing then you can try importing from app.js or main.js where you have initialized your Vue object.
require('./bootstrap');
require('alpinejs');
import { createApp } from 'vue'
import App from '#/App.vue'
import router from "#/routes"
import axios from 'axios'
import Vuex from 'vuex'
import store from './store'
import LaravelVuePagination from 'laravel-vue-pagination';
const app = createApp(App)
app.config.globalProperties.$axios = axios;
app.component('Pagination',LaravelVuePagination);
app.use(router);
app.use(store);
app.use(Vuex);
app.mount('#app')
Visit https://www.npmjs.com/package/laravel-vue-pagination
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'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 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 }
});