I cannot seem to load the material design icons in Vuetify when using it in combination with laravel 8. I have already tried to add them via NPM as shown in this post and I have also tried to load them via the CDN using sass as shown in this post. I am trying to get the icons to show in a basic (non-function as of yet) navbar.
My code currently looks like the following:
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Vuetify
#import "~vuetify/dist/vuetify.min.css";
// #import '~#mdi/font/css/materialdesignicons.min.css';
#import url('https://fonts.googleapis.com/css?family=Material+Icons');
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
#import url('https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css');
Navbar.vue
<template>
<div>
<v-app-bar color="deep-purple accent-4" dense dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-menu left bottom>
<template>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-for="n in 5" :key="n" #click="() => {}">
<v-list-item-title>Option {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
</div>
</template>
<script>
export default {
mounted() {
console.log("Component mounted.");
},
};
</script>
Vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import colors from 'vuetify/lib/util/colors'
Vue.use(Vuetify)
export default new Vuetify({
theme: {
icons: {
iconfont: 'md',
},
dark: false,
themes: {
light: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
},
dark: {
primary: colors.blue.lighten3,
},
},
},
})
As you can see, the icons/button is rendered and clickable, but it doesn't show the icon:
Turns out all I had to do was include the icon font via a CDN in my layout app.blade.php (base template):
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
This did the job:
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vuetify + Vue + Laravel PoC</title>
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app app>
<navbar-component></navbar-component>
#yield('content')
</v-app>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Related
I have a Laravel project using vue js.
I made a toggle component with Vue.js to display and hide an element.
But the toggle button does not appear in my page.
What's wrong with my code ? I can find only Hello component appear on the page.
app.js
require('./bootstrap');
import { createApp } from 'vue';
import Hello from './components/Hello.vue';
import Toggle from './components/Toggle.vue';
createApp({
components: {
Hello,
Toggle,
}
}).mount('#app');
Toggle.vue
<template>
<div>
<button #click="toggleVisibility">Toggle</button>
<div v-if="visible">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Toggle',
data() {
return {
visible: true
};
},
methods: {
toggleVisibility() {
this.visible = !this.visible;
}
}
};
</script>
Hello.vue
<template>
<h1>{{message}}</h1>
</template>
<script>
export default {
name: 'Hello',
data() {
return {
message: 'Hello world'
};
}
};
</script>
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>
</head>
<body class="antialiased">
<div id="app">
<Hello/>
<Toggle>
<p>This will be appeared</p>
</Toggle>
</div>
</body>
<script src="{{ mix('/js/app.js') }}"></script>
</html>
Here is a small sample of using Vuetify. How can I correctly translate it into brython ?
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
{{ slide }} Slide
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
//https://vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
colors: [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4',
],
slides: [
'First',
'Second',
'Third',
'Fourth',
'Fifth',
],
}
},
})
</script>
</body>
</html>
I can't correctly translate js part of the code to brython. I expect to get working brython sample with Vuetify.
I saw samples of using pure Vue from brython and I like to see the same with Vuetify, because with Vuetify I can use ready components, just fill new html tags and fill json.
I found. Javascript objects are called through window.
'''
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/brython#3/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython#3/brython_stdlib.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body onload="brython(1)">
<div id="app">
<v-app id="inspire">
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
{{ slide }} Slide
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
<script type="text/python">
#https://vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort
from browser import document, window
Vue = window.Vue
app = Vue.new({
'el': '#app',
'vuetify': window.Vuetify.new(),
'data': {
'colors': [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4'
],
'slides': [
'First',
'Second',
'Third',
'Fourth',
'Fifth'
]
}
})
</script>
</body>
</html>
'''
I have a problem with my single page application(SPA) using Vue 3, Vue Router 4 & Laravel 8, my problem is that the components is not loading.
I made sure I installed vue-router, I don't know why the code can't run. The links are not even clickable. I have been on this for over 3 days now and still I haven't found the solution to the problem
This is my code.
app.js
require('./bootstrap');
window.Vue = require('vue').default;
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);
Vue.component('home', require('./components/Home.vue').default);
Vue.component('about', require('./components/About.vue').default);
Vue.component('contact', require('./components/Contact.vue').default);
const app = new Vue({
el: '#app',
router: new VueRouter(routes)
});
routes.js
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';
export default{
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
}
contact.vue
<template>
<h1>This is the contact us page.</h1>
</template>
<script>
export default {
}
</script>
about.vue
<template>
<h1 class="big">This is the about us page.</h1>
</template>
<script>
export default {
}
</script>
home.vue
<template>
<h1 class="big">This is the home page.</h1>
</template>
<script>
export default {
}
</script>
app.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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
#yield('content')
</div>
</html>
welcome.blade.php
#extends('layouts.app')
#section('content')
<router-link class="text-center" to='/'>Home</router-link>
<router-link class="" to='/about'>About</router-link>
<router-link class="" to='/contact'>Contact</router-link>
<router-view></router-view>
#endsection
web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/{any}', function(){
return view('welcome');
})->where('any', '.*');
The links are not clickable
I have removed the extra div that make You confused.
#extends('layouts.app')
#section('content')
<div id="app">
<router-link class="text-center" to='/'>Home</router-link>
<router-link class="" to='/about'>About</router-link>
<router-link class="" to='/contact'>Contact</router-link>
<router-view></router-view>
</div>
#endsection
I am new to Vuetify and vue. I am using vue and vuetify but due some reason I am not able open my page.The error I am getting when I run my project:
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
found in
---> at resources/js/components/appContainer.vue
My code:
appContainer.vue
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
app
>
<v-list dense>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-home</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Home</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-contact-mail</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Contact</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar
app
color="indigo"
dark
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col class="text-center">
<v-tooltip left>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon large>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer
color="indigo"
app
>
<span class="white--text">© 2019</span>
</v-footer>
</v-app>
</template>
<script>
export default {
props: {
source: String,
},
data: () => ({
drawer: null,
}),
}
</script>
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from './plugins/vuetify'
Vue.use(Vuetify);
Vue.component('app-container', require('./components/appContainer.vue').default);
const app = new Vue({
Vuetify,
Vue,
el: '#app',
});
spa.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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<app-container></app-container>
</div>
</body>
</html>
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Seems like you haven't given an export name for your app-container element. Try the below.
appContainer.vue
<template>
...
</template>
<script>
export default {
name: 'app-container'
props: {
source: String,
},
data: () => ({
drawer: null,
}),
}
</script>
Try to change the drawer from null to false:
data: () => ({
drawer: false,
}),
Please make your component name camelcase.
Like Vue.component('appContainer',require('./components/apContainer.vue').default);
So I have tried to fix this in multiple different ways and I know Vuetify is updated because I have reinstalled it in NPM before I used it.
I have some screenshots of the current problem but the weird part is its working in another project I am using and its running the same libraries.
https://i.imgur.com/UXK9DiB.png
https://i.imgur.com/ZoRl7e8.png
Code for uncolored component
<html>
<head>
<title>XRPLife Interfaces</title>
<link rel="stylesheet" href="libraries/vuetify/dist/vuetify.min.css">
</head>
<body>
<v-app>
<div id="test">
<v-text-field label="Testing" v-model="test"></v-text-field>
</div>
</v-app>
<script src="libraries/vue/dist/vue.min.js"></script>
<script src="libraries/vuetify/dist/vuetify.min.js"></script>
<script>
var app = new Vue({
el: "#test",
data: {
test: "",
},
methods: {
}
})
</script>
</body>
How it works with the SAME library but just a different project
https://i.imgur.com/86TNKfO.png
You have an incorrect nesting of HTML tags for the application. Try this:
<div id="test">
<v-app>
<v-content>
<v-container>
<v-text-field label="Testing" v-model="test"></v-text-field>
</v-container>
</v-content>
</v-app>
</div>
[ https://jsfiddle.net/ga8kpzp0/ ]