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/ ]
Related
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>
I am developing a single page application (SPA) using Laravel and VueJs. Where the index.blade.php page looks like:
<html>
<head>
<link rel="stylesheet" href="/css/app.css" />
</body>
<body>
<div id="app">
<layout></layout>
</div>
<script src="/js/app.js"></script>
</body>
</html>
The layout.vue component looks like:
<template>
<div>
<input type="text" #keyup="search" />
<router-view></router-view>
</div>
</template>
<script>
import router from 'router'
export default {
data() {
return {
popover: false
}
},
methods: {
search: function (e) {/*Ajax code to search*/}
}
}
</script>
Everything is working fine except slower page loading at first. I see a white page until javascript works. So I've decided to put some html code in index.blade.php. I want to put the html from layout.vue page to index.blade.php so that I can see the html layout before javascript loads. How can I properly merge layout.vue with index.blade.php so that #keyup method works?
here is my code for that
<template>
<div>
<h1><b>Add Employee</b></h1>
<h2><b>Add Employee</b></h2>
<h3><b>Add Employee</b></h3>
<h4><b>Add Employee</b></h4>
<h5><b>Add Employee</b></h5>
</div>
</template>
<script type="text/javascript">
export default {
}
</script>
<style scoped type="text/css">
</style>
this is the result
how to fix this? some explain why its happen
I want to display new line, I use tag but not work.
The original idea was to new a component, and then customize error-messages to div, But it’s too much trouble, so come to ask if there is an easy way
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
methods: {
},
data: {
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.3/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<link rel=stylesheet type="text/css" href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css">
<div id="app">
<v-app dark>
<v-text-field
label="Field"
error-messages="aaa<br>bbb"
></v-text-field>
</v-app>
</div>
This is a possible solution.
https://jsfiddle.net/ue9rqcwk/
HTML:
<div id="app">
<v-app dark>
<v-text-field
class="multiline"
label="Field"
error-messages="aaa
bbb"
></v-text-field>
</v-app>
</div>
css:
.multiline {
white-space: pre-line;
}
EDIT: Corrected URL
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);