I install vuetify using npm install vuetify and after then I added npm install sass sass-loader deepmerge -D Then I use php artisan serve and there is nothing in the site and in the console there is an error Uncaught ReferenceError: Vuetify is not defined.Also I add vue add vuetify and the plugin file was created and dependencies was added.nothing happens.Please help me to fix this issue.
mainapp.vue
<template>
<v-app >
<Navbar />
<v-main>
<router-view/>
</v-main>
<Footer />
</v-app>
</template>
<script>
//import HelloWorld from './HelloWorld'
import Navbar from './pages/navbar'
import Footer from './pages/footer'
export default {
components: { Navbar,Footer },
name: 'App',
// components: {
// HelloWorld
// },
data () {
return {
//
}
}
}
</script>
app.js
require('./bootstrap');
window.Vue=require('vue');
import router from './router';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
Vue.component('mainapp',require('./components/mainapp.vue').default);
const app=new Vue(
{
el: '#app',
vuetify: new Vuetify(),
router,
}
)
welcome.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>Fullstack Blog</title>
<link rel="stylesheet" href="/css/all.css">
<!-- to show icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<mainapp></mainapp>
</div>
</body>
<script src="{{mix('/js/app.js')}}"></script>
</html>
Related
I am working on Reactjs an using Nexts, Whenever i click on "dynamic routes" ([slug.js]) page then its working properly but whenever we refresh that page then css not including (design issues),How can i fix this,Here is my "document.js" code
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossOrigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#400;500;600;700&family=Darker+Grotesque:wght#300;400&family=Poppins:wght#100;300;400;500;700&display=swap"
rel="stylesheet"
/>
<Script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Here is my "_app.js" file
import "../styles/globals.css";
import "../public/Js/main.js";
import "aos/dist/aos.css";
import { useEffect } from "react";
import AOS from "aos";
import "../public/css/style.css";
import "../public/css/custom-audioplayer.css";
function MyApp({ Component, pageProps }) {
useEffect(() => {
AOS.init({
disable: function () {
var maxWidth = 800;
return window.innerWidth < maxWidth;
},
});
}, []);
return <Component {...pageProps} /> ;
}
export default MyApp;
I use Laravel 8 with laravel/ui 3.4 for front end.
I want to create fixed sidebar, footer and an area for router-view.
routes/web.php
Route::view('/{any}', 'home')->where('any', '.*');
resources/home.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id="app">
<router-view />
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
resouces/js/app.js
require('./bootstrap')
import { createApp } from 'vue'
import router from './router'
createApp({}).use(router).mount('#app')
resouces/js/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Shop from '../pages/Shop'
const routes = [
{
path: '/',
name: 'shop',
component: Shop
}
]
export default createRouter({
history: createWebHistory(),
routes
})
resouces/js/components/Sidebar.vue
<template>
This is fixed sidebar. This includes dynamics content
</template>
How to include this sidebar in home.blade.php ?
Or is there any way to create default Vue layout with child components?
SOLVED: I create a sidebar at js/components/layouts/MainSidebar.vue
js/app.js
import mainsidebar from './components/layouts/MainSidebar.vue'
const app = createApp({})
app.component('main-sidebar', MainSidebar)
home.blade.php
<div id="app">
<main-sidebar></main-sidebar>
<router-view />
</div>
Use <main-sidebar></main-sidebar> not <main-sidebar />
I am working with Reactjs and using nextjs framework,I am integrating/converting "index.html" to "index.js" page
Whenever i go to "About" page then "About" page is displaying fine but whenever i click again on "Home" page
then page is not showing,only loader is displaying untill i refresh page,Where i am wrong ?
Here is my _document.js
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/fontawesome.css" />
<link rel="stylesheet" type="text/css" href="css/templatemo-stand-blog.css" />
<link rel="stylesheet" type="text/css" href="css/owl.css" />
</Head>
<body>
<Main />
<NextScript />
<Script src="../vendor/jquery/jquery.min.js" strategy="beforeInteractive"></Script>
<Script src="../vendor/bootstrap/js/bootstrap.bundle.min.js" strategy="lazyOnload" ></Script>
<Script src="../js/custom.js" strategy="lazyOnload"></Script>
<Script src="../js/owl.js" strategy="afterInteractive"></Script>
<Script src="../js/slick.js" strategy="lazyOnload" ></Script>
<Script src="../js/isotope.js" strategy="lazyOnload" ></Script>
<Script src="../js/accordions.js" strategy="lazyOnload" ></Script>
</body>
</Html>
)
}
Here is my _app.js file
import Script from 'next/script'
import '../styles/globals.css'
import '../public/vendor/bootstrap/css/bootstrap.min.css'
import '../public/css/fontawesome.css'
import '../public/css/templatemo-stand-blog.css'
import '../public/css/owl.css'
import jQuery from 'jquery';
import {useEffect} from "react";
import Header from '../components/Layout/Header'
import Footer from '../components/Layout/Footer'
function MyApp({ Component, pageProps }) {
return <><Header /><Component {
...pageProps} /><Footer /></>
}
export default MyApp
VScode is not importing my main.js file. I don't understand what I am doing wrong either. The index.html is right next to the main.js but it is not able to find it. I have imported many js files into html before so why is it breaking on me now? Does anyone have any idea's?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
<!--Mount App-->
<script>
const mountedApp = app.mount;
</script>
</body>
</html>
Here is the js file, I am not able to use it because it's not connecting to the html so there is it is just spiting out how Vue is not defined.
const app = Vue.createApp({
data() {
return{
product: 'Socks'
}
}
})
And the directory looks like this
Intro-to-Vue
-Assest
-Images
Socks.png
Index.html
main.js
Any help would be awesome. Thanks
You're using the vue 3 syntax with vue 2 CDN script :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
</body>
</html>
and main.js like :
new Vue({
el: '#app',
data() {
return {
product: 'Socks'
}
}
})
I have a Vue.js app. My app is mainly composed of single file components. I'm trying to use the vue-bootstrap-datetimepicker component in one of my components.
At this time, my app runs. When I click on the date field, the current date appears. However, I never see the popup calendar. I also don't see any errors in the Chrome Console window. I don't understand why this isn't working. Currently, I have the following:
page.vue
<template>
<div>
<date-picker v-model="myDate" :config="myDateConfig"></date-picker>
<br />
</div>
</template>
<script>
import datePicker from 'vue-bootstrap-datetimepicker';
export default {
components: {
datePicker
},
data: function() {
return {
myDate: null,
myDateConfig: {
format: 'MM/DD/YYYY',
useCurrent: true,
showClear: true,
showClose: true
},
}
}
</script>
app.js
import Vue from 'vue';
window.Vue = Vue;
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import moment from 'moment';
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
const routes = [
{ path: '/', component:require('./page.vue').default }
];
const router = new VueRouter({
routes:routes
});
const app = new Vue({
router,
el: '#app'
data: {}
});
index.html
<!doctype html>
<html lang="en">
<head>
<title>DatePicker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/vue#2.5.3/dist/vue.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Why doesn't the popup calendar show up when I click in the date-picker?