I used laravel 6.2 and vuetify. But, my vuetify not working. i don't see any design for vuejs. And There is no any mistake What did i wrong??. Please help me.
"vuetify": "^2.1.12"
"laravel/framework": "^6.2"
Below code is my script:
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
Using app.scss in bootstrap:
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons');
#import '~vuetify/dist/vuetify.min.css';
following code is my web page:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id ="app">
<v-toolbar>
<v-toolbar-items>
<v-btn text>Link one</v-btn>
<v-btn text>Link two</v-btn>
<v-btn text>Link three</v-btn>
</v-toolbar-items>
<script> src ="{{ asset('js/app.js') }}" </script>
</body>
</html>
First in assets/js/components folder create a new file called Navbar.vue. Then in Navbar.vue write
<template>
<v-toolbar>
<v-toolbar-items>
<v-btn text>Link one</v-btn>
<v-btn text>Link two</v-btn>
<v-btn text>Link three</v-btn>
</v-toolbar-items>
</template>
<script>
</script>
In you app.js add newly created component like so
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.component('navbar', require('./components/Navbar.vue').default);
const app = new Vue({
el: '#app',
});
Then in your index.blade.php file change it to the following.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id ="app">
<navbar></navbar>
</div>
<script> src ="{{ asset('js/app.js') }}" </script>
</body>
</html>
And finally run npm run dev. Visit the page and now you should be able to see everything as it should be.
As i said in this reply, in Vuetify 2 when you create your Vue istance you must create a new istance of Vuetify also.
const app = new Vue({
el: '#app',
vuetify: new Vuetify()
});
I suggest you also to add this after importing Vuetify:
import 'vuetify/dist/vuetify.min.css'
Related
I have application on aspnet mvc and import vuejs v3 cdn and i like use vuetify but i dont know how do it.
its my code example
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewData["Title"] - MVCAndVue</title>
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
<script>
const {
ref,
reactive,
} = Vue;
//Define Vue app
const App = {
data() {
return {
};
},
methods: {
},
setup(props, context) {
}
};
// Create new Vue app
const app = Vue.createApp(App);
app.mount("#app");
</script>
You are facing this issue because you included Vuetify 2.x which is not compatible with Vue 3. So, use Vuetify 3 instead.
Now, the right way to use Vuetify via CDNs, you need to follow these steps-
Import Vuetify CSS in your head tag-
<link
href="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.css"
rel="stylesheet"
/>
If you want to use material design icons, then import this CSS link in your head tag too-
<link
href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
Import the Vuetify script in your body tag-
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.js"></script>
If you are planning to use Vue3 also via CDN, then import the Vue script in your body tag-
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
Here is a complete working HTML file with all necessary imported CDNs for Vue3 and Vuetify3-
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.js"></script>
<script type="text/x-template" id="app-template">
<v-app>
<v-card
class="mx-auto"
width="400"
append-icon="mdi-human-greeting"
>
<template v-slot:title>
Title
</template>
<v-card-text>
Description
</v-card-text>
</v-card>
</v-app>
</script>
<script>
const { createApp } = Vue;
const { createVuetify } = Vuetify;
const vuetify = createVuetify();
const app = createApp({
template: "#app-template",
})
.use(vuetify)
.mount("#app");
</script>
</body>
</html>
To read more about using CDNs, read here-
https://next.vuetifyjs.com/en/getting-started/installation/#cdn
https://next.vuetifyjs.com/en/features/icon-fonts/#material-design-icons
It is my first "try" with Vue + vue-select.
I have imported Vue and vue-select like it is explained in the vue-select documentation.
And my first try is this simple HTML page :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- include VueJS first -->
<script src="https://unpkg.com/vue#latest"></script>
<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select#latest"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-select#latest/dist/vue-select.css"
/>
</head>
<body>
<div id="app">
<h1>Vue Select</h1>
<v-select :options="options"></v-select>
</div>
<script>
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
options: ["foo", "bar", "baz"],
},
});
</script>
</body>
</html>
When I try this page, I have these errors in the console :
What it is wrong in this first try? When I understand this first example, it will be easier for the rest.
I just checked your code and seems this issue is due to the vue version you are using. I just used version 2.* and it is working.
Demo :
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
selected: 'foo',
options: ["foo", "bar", "baz"]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.3/vue-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css"/>
<div id="app">
<h1>Vue Select</h1>
<v-select :options="options" v-model="selected"></v-select>
</div>
Update : Here is the Vue 3 version of v-select
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
template: '#app-template',
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),
}).use(vuetify).mount('#app')
<script src="https://unpkg.com/vue#next/dist/vue.global.js"></script>
<script src="https://unpkg.com/#vuetify/nightly#3.0.0-next-20220604.0/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#vuetify/nightly#3.0.0-next-20220604.0/dist/vuetify.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<script type="text/x-template" id="app-template">
<v-app>
<v-container fluid>
<v-select
:items="items"
></v-select>
</v-container>
</v-app>
</script>
<div id="app"></div>
I cant seem to get this simple vue router work, its giving this in console GET http://127.0.0.1:8000/my-new-router 404 (Not Found), i am using it with laravel
app.js:
require('./bootstrap');
window.Vue = require('vue');
import router from './router'
Vue.component('navbar', require('./components/navbar.vue').default);
const app = new Vue({
el: '#app',
router
});
router.js:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import firstPage from './components/pages/MyFirstPage'
const routes= [
{
path: '/my-new-router',
component: firstPage
}
]
export default new Router({
model:'history',
routes
})
navbar.vue:
<template>
<div>
<h1>This is a test</h1>
<router-view></router-view>
</div>
</template>
MyFirstPage.vue:
<template>
<div>
</div>
</template>
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=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<div id="app">
<navbar></navbar>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
</html>
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Change the content of web.php to:
<?php
use Illuminate\Support\Facades\Route;
Route::get('{any}', function () {
return view('welcome');
})->where('any', '.*');
This way any route will be forwarded to vue-router.
I am pretty much stuck on it and I'm not even sure if what I was trying is possible.
Here's my project if needed:
https://drive.google.com/open?id=1lty3rzUs1h7Rtw5tsN92WeaTBJw2fqVy
Updated:
I'm not sure how to display it any better as this is the best it gets.. Basically im passing NestedComponent into Component which is getting passed into app.js which is rendering it into the index.html. That's it, for some reason doesn't work.
// "main.js" the Vue file that renders to the index.html
new Vue({
el: '#app',
components: { Component},
template: '<Component/>'
})
import Component from 'Component'
// "Component.vue" that is getting passed into the above "app.js"
<template lang="html">
<div>
<p>{{ title }}</p>
<h1>Hi!</h1>
<NestedComponent/>
</div>
</template>
<script>
import NestedComponent from 'NestedComponent'
export default {
name: 'Component',
components: {
NestedComponent
},
data: {
title: 'Hello'
}
}
</script>
// "NestedComponent.vue" a nested component that is getting passed onto it's parent Component "Component.vue"
<template lang="html">
<div>
<p>{{ im a nested component }}</p>
</div>
</template>
<script>
export default {
name: 'NestedComponent',
components: {
},
data: {
}
}
</script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">{{title}}</div>
<script type="text/javascript" src="/script.js"></script>
<script src="app.js"></script>
</body>
</html>
There are a few things that I think is causing the problem:
You are using .vue files. They require special loaders via
Webpack or similar tool. They will then be converted into a normal
.js file. In your case, you have a CDN version of Vue so these features will not be available to you.
As people have mentioned before the use of import and export is not supported by the browser natively. This again needs to run through the Webpack or similar tool.
Find similar information in the docs
https://v2.vuejs.org/v2/guide/single-file-components.html
How to import component in existing HTML page, below is the example. I tried with require but no luck.
`
<html>
<head>
<script src="//unpkg.com/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
import mycomponent from './components/mycomponent.vue'
var vm = new Vue({
el: '#app',
components: {
'my-component': mycomponent
}
})
</script>
</body>
</head>
</html>
`
The import line says unexpected identifier! what went wrong here, please help.
You need type=module on the script element, and the browser will treat the inline or external script as an ECMAScript module.
Here is how your code can be transformed
<html>
<head>
<script src="//unpkg.com/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="module">
import mycomponent from './components/mycomponent.vue'
var vm = new Vue({
el: '#app',
components: {
'my-component': mycomponent
}
})
</script>
</body>
</head>
</html>
You can read more about ECMAScript modules in browsers here