I start up a new Laravel + Vue + Stylus project, and i can't normally work because i always got blank page when adding/editing some styles on .styl files. And when i edit my .vue templates it come back to normal state.
My main.js file:
import Vue from 'vue';
import VueRouter from 'vue-router';
import { routes } from './routes/index';
import App from './App.vue';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
My webpack.mix.js file:
mix.js('resources/assets/js/main.js', 'public/js')
.stylus('resources/assets/stylus/app.styl', 'public/css')
.browserSync('localhost:8000');
Some strange thing that i noticed is that when i save my .styl file i got main.js like prod version(not compiled) and in console has an error:
Uncaught SyntaxError: Unexpected token import
If i save this file again i got normal compiled main.js file, but it doesn't render my App
And finally when i edit .vue templates all works perfect.
Related
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.
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 been trying to setup a simple vue application using VueRouter with Laravel. But the vue-router is not loading the components properly.
welcome.blade.php
<body>
<div id="app">
<main-app/>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
app.js
//import Vue from 'vue';
window.Vue = require('vue');
import VueRouter from 'vue-router';
import {
routes
} from './routes';
import MainApp from './components/MainApp.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes,
mode: 'history'
});
const app = new Vue({
el: '#app',
router,
components: {
MainApp
}
});
routes.js
import Home from './components/Home.vue'
export const routes = [{
path: '/',
component: Home,
name: 'Home'
}];
MainApp.vue
<template>
<div id="main">
<router-view></router-view>
</div>
</template>
If http://localhost:8080/vue-spa is dialed, "Home component" should be displayed (which we are displaying in Home.vue). But , nothing is displaying.
Screenshot of Dev Tools
I am new to Vue , help to find a solution for this.
Your routes.js should be -
import Home from './components/Home.vue'
export const routes = [{
path: '/vue-spa',
component: Home,
name: 'Home'
}];
Also, make sure the following is done -
You have executed the npm install command in your project. This will install the laravel-mix package, necessary for compiling your js files. (Learn more)
Then once you have your laravel-mix installed, configure the webpack.mix.js file present in your root folder. In your case (assuming the app.js file where you have written your js code is present in resources/js) the webpack.mix.js should look like -
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js');
This will yield the compiled resourses/js/app.js file in public/js/app.js
Once that is done execute npm run watch. This will recompile the public/js/app.js file every time you make any changes in your resources/js/app.js code or its imported files.
Another very important step would be to set up Laravel's routes so that any request the server receives gives an entry point to your vue.js SPA. This is the probable reason that you are getting a 404 page. Define the following route in your web.php to enable that -
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::view('/{any}', 'welcome')->where('any', '.*');
I have been strugling for a few hours trying to install Vuetify in my laravel project but I cannot make it work correctly, the Vuetify components are working well but Icons and breakpoints are not, I tried everything and now Im kinda tired of this, I hope someone can help me...
Following the vuetify documentation I wrote this in my app.js
require('./bootstrap');
import Vue from 'vue';
import Vuex from 'vuex';
import router from './router'
import vuetify from './plugins/vuetify.js' // path to vuetify export
Vue.use(Vuex);
new Vue({
vuetify,
router,
}).$mount('#app')
and separately, a vuetify.js file
import '#mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
})
and added the vuetify-loader to my webpack.mix.js
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
new VuetifyLoaderPlugin(),
]
}).sourceMaps();
mix.disableSuccessNotifications();
First of all, having this configuration the project wont even run, I get this error: "Error: Conflict: Multiple assets emit to the same filename fonts/vendor/#mdi/materialdesignicons-webfont.eot?a32fa1f27abbfa96ff2f79e1ade723d5"
So I removed the import "#mdi/font/css/materialdesignicons.css" from the vuetify.js file, no errors but the icons are not visible.
I took the code from the documentation of Toolbar and pasted in my project and this is how it looks
This is the code for that empty toolbar
<template>
<v-card
color="grey lighten-4" flat height="200px" tile>
<v-toolbar dense>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</template>
If I change iconfont from 'mdi' to 'mdiSvg' from the vuetify.js file I do get one icon but the others still missing
According to the documentation, this toolbar should look something like this:
but that's not it yet, I cannot even use vuetify breakpoints like $vuetify.breakpoint.smAndUp I get an undefined error in console
Using Vuetify with Laravel differs a little bit from the the documentation. and depends on Vuetify version and here how to install it for the last two versions
Vutify v1.5.x
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify); // to access $vuetify inside your Vue components
A little bit different in Vuetify v2.0.x
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
const app = new Vue({
vuetify: new Vuetify(), // to access $vuetify inside your Vue components
});
You can also if you like add vuetify.min.css inside app.scss file inside resources/sass folder along with material icons as follows:
// /resources/sass/app.scss
// Fonts
#import '~#mdi/font/css/materialdesignicons.min.css';
// Vuetify
#import '~vuetify/dist/vuetify.min.css';
go to the vuetifyjs website treeshaking method it is the best way!
https://vuetifyjs.com/en/getting-started/installation/
like the bellow!
import Vuetify, {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
} from 'vuetify/lib'
import fa from 'vuetify/lib/locale/fa'
Vue.use(Vuetify, {
components: {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
},
});
new Vue({
el: '#yourappid',
router: router,
render: h => h(App),
vuetify: new Vuetify({
rtl: true,
lang: {
locales: { fa },
current: 'fa',
},
}),
data() {
return {
breadcrumbs: [],
sidebarBg: "deep-purple"
}
}
});