I have an application that is based on larvel blades.
In the blades I want to use vueJs3 without build, but to insert vue components.
I'm getting an error in the console: Uncaught ReferenceError: createApp is not defined
I followed these steps:
npm install
npm install vue
npm install vue-loader
npm i #vitejs/plugin-vue
in the vite.config.js file I added
import vue from '#vitejs/plugin-vue'
export default {
plugins: [vue()]
}
I created the file example.vue
in the app.js file I added
import { createApp } from "vue";
import example from "./example.vue";
npm run dev
I use:
Laravel 9.19
vite 2.9.11
vueJs 3
vue-loader 17.0.0
My files:
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
resources/js/app.js
import './bootstrap';
import { createApp } from "vue";
import example from "./example.vue";
welcome.blade
<body>
<div id="app">
<example/>
</div>
#vite('resources/js/app.js')
</body>
<script>
var app = createApp({
components: {
example
},
data() {
return {
message: "Hello world"
}
}
})
app.mount("#app")
</script>
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
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.
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See :// webpack . js .org/concepts#loaders
> <template>
| <div class="container">
| <div class="row justify-content-center">
# ./resources/js/Router.js 4:0-53 11:15-19
# ./resources/js/app.js
# multi ./resources/js/App.js ./resources/sass/app.scss
in APP
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './Router'
new Vue({
el: '#app',
router
});
in Router js
i importing the vue-router and vue
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import User from './components/ExampleComponent.Vue'
Vue.use(VueRouter);
const router = new VueRouter({
mode:'history',
routes:[
{ path:'/user', component: User, } ,
{ path:'/categories', component: categories, } ,
]
})
I ran into this error too. In my own case, I ran into this error because I wanted to use tailwind v2.0.
I think it have something to do with Laravel Mix v6.0 or POSTCSS 8. Because Vue SFCs doesn't work with PostCSS 8-only plugins yet. Taken from (https://github.com/JeffreyWay/laravel-mix/issues/2625).
So in my own case, the steps I took are listed below.
I uninstall the concerned packages npm uninstall tailwindcss postcss autoprefixer
Then I installed them back with compatibility build npm install tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
Check https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
I added "laravel-mix": "^5.0.1" to the package.json file to downgrade the laravel mix from v6.0 to v5.0.1.
Then npm install
Finally, npm run watch
I followed a tutorial on youtube for Vuetify setup with laravel. I managed to set up the project successfully, i.e. install all dependencies as specified in the tutorial. Although in the final step, NPM watch, I get the following error in the console;
Uncaught TypeError: _plugins_vuetify__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor
vuetify.js code:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
The problem is exactly lies where you exporting default Vuetify.
The best practice to this is to import Vuetify in the separate file in the plugins for example so I will keep this up with this practice.
So after running:
$ npm install vuetify --save
// OR
$ yarn add vuetify
to install Vuetify on existing applications through the Webpack or creating a new Vue.js project just like this:
$ vue add vuetify
You should follow the below instruction.
Vuetify v1.5.*
If you are using Vuetify v1.5.* follow the below instruction (otherwise, skip this to the next one)
First of all you don't have to export Vuetify in this version and you just have to import Vuetify and tell Vue to use it. So the plugins/vuetify.js should be like this (You can also directly do the following in your main.js or app.js):
// /plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
NOTE: You can also define some setting in the above file within the Vue.use and pass it as an object just like this:
Vue.use(Vuetify, {/*Your setting goes here*/})
And then import it like below in your main.js or app.js:
// main.js or app.js
import Vue from 'vue'
import 'vuetify/dist/vuetify.min.css' // You also need to import Vuetify CSS file and also ensure you are using css-loader
import './plugins/vuetify' // We have assuemed the above snippet is in the plugins directory and it lies next to main.js or app.js
...
new Vue({
el: "#app",
router,
store,
render: h => h(App),
})
Vuetify v2.*.*
After adding it through your Webpack you need to locate webpack.config.js and add the following setting into your Webpack to configure the loader:
// webpack.config.js
module.exports = {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
],
}
After that just create a plugin directory and then vuetify.js file like and add the following into it:
// /plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Then navigate to your main entry (main.js or app.js) and import it like below:
// main.js or app.js
import Vue from 'vue'
import vuetify from '#/plugins/vuetify' // We have assumed the above snippet is in the plugins directory and it lies next to main.js or app.js
new Vue({
vuetify,
}).$mount('#app')
NOTE: This much more sound like an instruction but for more information you can visit the documentation here.
Im trying to study Laravel with VueJS using Homestead. I decided to use Vuetify in my study instead of Bootstrap by installing it throughnpm.
Here is my app.js:
import "material-design-icons-iconfont/dist/material-design-icons.css";
import "vuetify/dist/vuetify.min.css";
import Vue from "vue";
import Vuetify from "vuetify";
import App from "./components/App.vue";
import ExampleComponent from './components/ExampleComponent.vue';
import VueRouter from "vue-router";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(Vuetify, VueRouter, axios, VueAxios);
const routes = [
{ path: "/", name: "Dashboard", component: ExampleComponent }
];
const router = new VueRouter({ mode: "history", routes: routes, linkExactActiveClass: "active" });
new Vue(Vue.util.extend({ router }, App)).$mount("#app");
But in my console log I'm getting this error:
Source map error: SyntaxError: JSON.parse: unexpected character at
line 1 column 1 of the JSON data Resource URL: http://xcy.dv/js/app.js
Source Map URL: vuetify.js.map
What am I missing here? I'm new to VueJS
By the help of Vuetify community, I found out that I need to include .sourceMaps() in my webpack.mix.js like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').sourceMaps();
It basically enable the source maps since it's disabled by default.
I had to update webpack.mix.js with
mix.webpackConfig({
output: {
chunkFilename: mix.inProduction() ? "js/prod/chunks/[name]?id=[chunkhash].js" : "js/dev/chunks/[name].js"
},
devtool: 'source-map' // Notice this
}).sourceMaps(); // And this
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');