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
Related
I'm building an SPA with Laravel and Vue.js with vite, and I have another project with Laravel Breeze and Inertia js for the CMS. How can I merge these 2 projects into one ? So I can have an SPA project with CMS on it like an admin page that u can set through the routes.
Is it possible ?
This is the app.js in my CMS project
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
This is the app.js in my SPA project
import '../css/navbar.css';
import '../css/home.css';
import '../css/kenapa.css';
import '../css/ceritakami.css';
import '../css/karir.css';
import '../css/lowongan.css';
import '../css/media.css';
import '../css/gabung.css';
import '../css/mitra.css';
import '../css/download.css';
import '../css/footer.css';
import { createApp } from 'vue';
import App from './layouts/app.vue';
createApp(App).mount('#app');
I tried to copy the pages into the CMS and vice versa, but It just keep giving me errors.
I'm a beginner and I just don't get it using inertia, because in my SPA project, I'm using App.vue as a layout to call other pages like this :
<NavbarVue/>
<Home/>
<Kenapa/>
<Cerita/>
<Karir/>
<Lowongan/>
<Media/>
<Gabung/>
<Mitra/>
<Download/>
<Footer/>
</template>
<script setup lang="ts">
import NavbarVue from '../components/Navbar.vue';
import Home from '../pages/Home.vue';
import Media from '../pages/Media.vue';
import Kenapa from '../pages/Kenapa.vue';
import Cerita from '../pages/Cerita.vue';
import Lowongan from '../pages/Lowongan.vue';
import Karir from '../pages/Karir.vue';
import Gabung from '../pages/Gabung.vue';
import Mitra from '../pages/Mitra.vue';
import Download from '../pages/Download.vue';
import Footer from '../components/Footer.vue';
</script>
But in Inertia I can't do that, Can someone enlighten me ?
Migration
Make a new Laravel 9 project and follow the instructions for installing Breeze w/ Inertia nad Vue.
https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia
You will then move the *.vue files over to the new project and parse them appropriately.
For instance, you may get data via Axios calls in your Spa. With Inertia, you pass data directly from the controllers.
Furthermore, you will have to import your controllers and all related PHP files into the new project and parse them to align with the Inertia design structure.
Testing
If you haven't already, I highly suggest you get into testing with PHPUnit. Properly tested code can make migrating files from one repository to another less nerve-wracking.
https://laravel.com/docs/9.x/testing
Conclusion
Overall, this would be a massive project that could possibly take months. But if you intend to combine two completely different projects into one, that complexity will require it, especially if neither is tested.
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
Recently I ran into the problem of importing Fontawesome icons to Vue.js in Laravel. In this way, I could import the Spinner icon that I took from the tutorial. But, how can I get the name of other such icons or import them in another easier way?
app.js:
require('./bootstrap');
import { createApp } from 'vue'
import Home from './components/Home.vue';
import Offers from './components/Offers.vue';
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
import { library } from "#fortawesome/fontawesome-svg-core";
import { faSpinner } from "#fortawesome/free-solid-svg-icons";
const app=createApp({});
app.component('home',Home);
app.component('offers',Offers);
app.component("font-awesome-icon", FontAwesomeIcon);
library.add(faSpinner);
app.mount('#app');
Vue component:
<font-awesome-icon
icon="spinner"
size="3x"
spin fixed-width>
</font-awesome-icon>
The directions are found here: https://fontawesome.com/docs/web/use-with/vue/.
import Vue from 'vue'
import App from './App'
/* import the fontawesome core */
import { library } from '#fortawesome/fontawesome-svg-core'
/* import specific icons */
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
/* import font awesome icon component */
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
/* add icons to the library */
library.add(faUserSecret)
/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
<template>
<div id="app">
<!-- Add the style and icon you want -->
<font-awesome-icon icon="fa-solid fa-user-secret" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
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 }
});