I'm trying to integrate Core-ui PRo with Laravel with no luck. I get a blank page. No errors in console, no errors compiling. I don't have experience installing this templates.
In the Vue tab I can see the root but nothing below. Inside the root have this data:
route
path:"/dashboard"
query:Object (empty)
params:Object (empty)
fullPath:"/dashboard"
name:"Dashboard"
meta:Object (empty)
My packages.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.8.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.8.0",
"#vue/cli-plugin-eslint": "^3.8.0",
"#vue/cli-plugin-unit-jest": "^3.8.0",
"#vue/cli-service": "^3.8.4",
"#vue/test-utils": "1.0.0-beta.29",
"axios": "^0.19",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"cross-env": "^5.1",
"growl": "^1.10.5",
"https-proxy-agent": "^2.2.1",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"#coreui/coreui-pro": "^2.1.14",
"#coreui/icons": "0.3.0",
"#coreui/vue": "^2.1.2",
"bootstrap": "^4.3.1",
"bootstrap-vue": "2.0.0-rc.24",
"chart.js": "^2.8.0",
"core-js": "^2.6.9",
"css-vars-ponyfill": "^2.0.2",
"flag-icon-css": "^3.3.0",
"font-awesome": "^4.7.0",
"mini-toastr": "0.6.6",
"perfect-scrollbar": "^1.4.0",
"quill": "^1.3.6",
"simple-line-icons": "^2.4.1",
"spinkit": "1.2.5",
"text-mask-addons": "^3.8.0",
"v-calendar": "^0.9.7",
"vue": "^2.6.10",
"vue-chartjs": "^3.4.2",
"vue-codemirror": "^4.0.6",
"vue-grid-layout": "^2.3.4",
"vue-mq": "^1.0.1",
"vue-multiselect": "^2.1.6",
"vue-notifications": "0.9.0",
"vue-perfect-scrollbar": "^0.1.0",
"vue-quill-editor": "^3.0.6",
"vue-resize": "^0.4.5",
"vue-router": "^3.0.6",
"vue-select": "2.4.0",
"vue-simple-calendar": "^3.0.2",
"vue-tables-2": "^1.4.70",
"vue-text-mask": "^6.1.2",
"vue2-google-maps": "^0.10.6",
"vuelidate": "^0.7.4"
}
}
My app.scss
// CoreUI Icons Set
#import '~#coreui/icons/css/coreui-icons.min.css';
/* Import Font Awesome Icons Set */
$fa-font-path: '~font-awesome/fonts/';
#import '~font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
$simple-line-font-path: '~simple-line-icons/fonts/';
#import '~simple-line-icons/scss/simple-line-icons.scss';
/* Import Flag Icons Set */
#import '~flag-icon-css/css/flag-icon.min.css';
/* Import Bootstrap Vue Styles */
#import '~bootstrap-vue/dist/bootstrap-vue.css';
// Import Main styles for this application
#import '../js/assets/scss/style';
My app.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import './polyfill'
// import cssVars from 'css-vars-ponyfill'
import Vue from 'vue'
import BootstrapVue, { BvComponent } from 'bootstrap-vue'
import router from './router/index'
import coreui from '#coreui/coreui-pro'
// todo
// cssVars()
Vue.use(BootstrapVue)
Vue.component('dashboard', require('./views/Dashboard').default);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
coreui,
dashboard
})
And copied all folders inside scr from core-ui package
And this is my blade file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>CoreUI - Vue Open Source Bootstrap Admin Template</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</head>
<!-- BODY options, add following classes to body to change options
// Header options
1. '.header-fixed' - Fixed Header
// Brand options
1. '.brand-minimized' - Minimized brand (Only symbol)
// Sidebar options
1. '.sidebar-fixed' - Fixed Sidebar
2. '.sidebar-hidden' - Hidden Sidebar
3. '.sidebar-off-canvas' - Off Canvas Sidebar
4. '.sidebar-minimized' - Minimized Sidebar (Only icons)
5. '.sidebar-compact' - Compact Sidebar
// Aside options
1. '.aside-menu-fixed' - Fixed Aside Menu
2. '.aside-menu-hidden' - Hidden Aside Menu
3. '.aside-menu-off-canvas' - Off Canvas Aside Menu
// Breadcrumb options
1. '.breadcrumb-fixed' - Fixed Breadcrumb
// Footer options
1. '.footer-fixed' - Fixed footer
-->
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
<dashboard></dashboard>
</div>
<!-- built files will be auto injected -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Related
I have followed the steps mentioned in this link for desktop notification in localhost https://pusher.com/tutorials/desktop-notifications-laravel/. and run the command in cli 'npm run dev'.
after running the project using command 'php artisan serve' in live link getting the error
app.js
require('./bootstrap');
Vue.component('home', require('./components/Home.vue'));
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]).vue();
bootstrap.js
window._ = require('lodash');
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: true
});
welcome.blade.php
<!-- ./resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>News Talk</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<style>
.container {
padding-top: 100px;
}
</style>
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<!-- home Vue component -->
<home></home>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
when run the command 'npm run dev'
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"laravel-echo": "^1.11.3",
"pusher-js": "^7.0.3",
"vue": "^2.6.12"
}
}
Please help me to solve this issue.
First remove node_modules folder and package-lock file by running rm -rf node_modules/ package-lock.json.
Remove vue dependencies vue, vue-loader and vue-template-compiler from package.json file.
Now run npm install.
Install vue and vue-loader by npm install vue vue-loader file-loader
It will install vue 2.6.13 and vue-loader 15.9.7 and file-loader 6.2.0 version package.
Install npm install vue-template-compiler --save
In app.js file
require('./bootstrap');
import Vue from 'vue';
Vue.component('home', require('./components/Home.vue'));
You don't need to add cdn link in blade file. It will automatically added using webpack
you have missing this window.Vue = require("vue"); in
app.js
window.Vue = require("vue");
require('./bootstrap');
Vue.component('home', require('./components/Home.vue'));
put this on your package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue-loader": "^15.9.7",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"laravel-echo": "^1.11.3",
"pusher-js": "^7.0.3",
"vue": "^2.6.12"
}
}
then run npm run update && npm run dev
Laravel was installed and so was Vue:
composer require laravel/ui
php artisan ui vue
npm install && npm run dev`
However, Laravel cannot find the Vue instance that is created in app.js.
welcome.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<script src="js/app.js"></script>
</head>
<div id="app">
<example-component></example-component>
</div>
<script>
</script>
</body>
</html>
The error that appears in the browser console showing that Laravel can't fine the Vue instance named #app:
[Vue warn]: Cannot find element: #app
Any help would be greatly appreciated:
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component',require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
}
The only way I was able to get Vue working on Laravel was to use this as the correct example:
https://github.com/connor11528/laravel-vue-spa-tailwindcss
I just did a fresh install of Laravel 6.1 and ran
composer require laravel/ui
php artisan ui vue
npm install && npm run dev
But when looking at my page in the browser I see that the Vue component is not displayed and Vue isn't even loaded at all. I have the following errors in my DOM.
Are these the reason that Vue isn't loading? And how do I solve them? The url should be http://localhost/laravel_applications/webgame/public/css/app.css and http://localhost/laravel_applications/webgame/public/js/app.js how can I change this? I'm running it on Xammp and it's in the htdocs folder under /laravel_applications/webgame. I tried changing the APP_URL in the env file to
APP_URL=http://localhost/laravel_applications/webgame/public
but that did not work.
Vue is installed in my project and my app.js looks like this
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue';
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
Vue.component('application', require('./components/application.vue').default);
const app = new Vue({
el: '#app',
});
I have an components/application.vue that looks like this
<template>
<div>
Test
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
And a welcome.blade.php that looks like this
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SPA</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
<script defer src="{{ mix('js/app.js') }}"></script>
</head>
<body>
<div id="app">
<application></application>
</div>
</body>
</html>
My package.json looks like this
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-router": "^3.1.3"
}
}
And this is my mixin file
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
you don't need to put
APP_URL=http://localhost/laravel_applications/webgame/public
laravel has helper asset() which is point to public folder of laravel so anything inside you public dir you can load via asset() function
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SPA</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
<script defer src="{{ asset('js/app.js') }}"></script>
</head>
<body>
<div id="app">
<application></application>
</div>
</body>
</html>
ref link https://laravel.com/docs/master/helpers#method-asset
I am using Laravel 5.8 which includes Vue JS in it by default and I want to use Vuetify. Here is what I have done
I have followed exactly what is written in the blog https://codersdiaries.com/laravel-vuetify/ and I am getting an error message in the console that [Vue warn]: Error in beforeCreate hook: "Error: Vuetify is not properly initialized
Here are my files
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<v-app id="app">
<h1>Test Vuetify</h1>
</v-app>
</body>
</html>
app.js
window.Vue = require('vue');
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"cross-env": "^5.1",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vuetify": "^2.0.18"
}
}
You aren’t giving Vue an instance of Vuetify:
const vuetify = new Vuetify();
const app = new Vue({
el: '#app',
vuetify
});
I am working with Nuxt.js on my Laravel project. I needed to combine both of them together since they come with a boilerplate when installing them into my project.
I was able to get almost everything working up to the point where I needed my welcome.blade.php to be able to read my index.vue component that was created inside of my resources/nuxt/pages folder.
Currently, the problem I am getting is that I have an "unexpected identifier on line 1 of my public/App.js" file where I import vue.
Import Vue from 'vue'
SO. How things get compiled is through my yarn run dev-nuxt that I modified in my package.json (simplified | only showing what I think I need to | i'd be happy to show more upon request)
{
"private": true,
"scripts": {
"dev-nuxt": "nuxt",
},
Prior to that I was running yarn run dev
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
which would look at webpack.mix.js. When running yarn run dev my terminal would return these errors:
Module not found: Error: Can't resolve '~/components/Logo.vue' in 'C:\Users\Owner\Documents\META+LAB\iSTART\resources\pages'
# ./resources/pages/index.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/pages/index.vue?vue&type=script&lang=js&) 28:0-41 32:10-14
# ./resources/pages/index.vue?vue&type=script&lang=js&
# ./resources/pages/index.vue
# ./resources/js/app.js
# multi ./resources/js/app.js ./resources/assets/app.scss
So then I also realized that my webpack.mix.jshas no references to my nuxt.config.js (simplified | only showing what I think I need to | i'd be happy to show more upon request)
const pkg = require('./package')
const path = require('path');
module.exports = {
mode: 'spa',
/*
** srcDir points to where nuxt will be compiled by yarn nuxt-dev
*/
srcDir: 'resources/',
/*
** buildDir is where my nuxt code will be compiled to
*/
buildDir: 'public/js/',
** Nuxt.js modules
*/
modules: [,
// Doc: https://bootstrap-vue.js.org/docs/
'bootstrap-vue/nuxt',
'nuxt-babel'
],
which has a reference to my .babelrc which should be compiling my vue into my App.js (simplified | only showing what I think I need to | i'd be happy to show more upon request)
{
"env": {
"test": {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#nuxt/babel-preset-app"
]
}
}
}
So I'm not sure why I am getting this error. Is it possible that I have either my nuxt.config.js or my .babelrc set up improperly?
This is how my welcome.blade.php looks:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<index></index>
</div>
<script src="/js/App.js"></script>
</body>
</html>
When compiling nuxt through yarn run dev-nuxt as declared in my package.json above, I get a port that shows my index.vue component perfectly, however I do not have access to this component when running php artisan serve
I have a feeling that I did not configure something properly, or that I need to install more packages?
For reference here is my whole package.json
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.27",
"axios": "^0.18",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jest": "^23.6.0",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"nodemon": "^1.18.9",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.6.2",
"vue-jest": "^3.0.2"
},
"dependencies": {
"#babel/core": "^7.2.2",
"babel-loader": "^8.0.5",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"cross-env": "^5.2.0",
"node-sass": "^4.11.0",
"nuxt": "^2.4.0",
"vue-loader": "^15.6.2"
}
I think on the html level, you still need to initialize Vue on #app in a script tag ... cause I don't think Vue is initialized , basically :
let app = new Vue({el : "#app'});