Using a vue-bootstrap-datetimepicker in a Vue Single File Component - javascript

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?

Related

Create vue layout in laravel ui

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 />

VueJS doesn't recognize my variable between curly braces

I'm moving my very first steps into VueJS but I'm already stuck.
I'm simply trying to display a variable, but even if the syntax look correct to me, I get
{{product}}
displayed instead of the actual product name. Here's the HTML:
<!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 -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{product}}</h1>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>
And here's the JS:
const app = Vue.createApp({
data() {
return {
product: "socks",
};
},
});
Thank you!
You should use the CDN of version 3 since the syntax of Vue 3 :
<script src="https://unpkg.com/vue#3"></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 -->
<script src="https://unpkg.com/vue#3"></script>
</head>
<body>
<div id="app">
<h1>{{product}}</h1>
</div>
<!-- Import App -->
<script>
const app = Vue.createApp({
data() {
return {
product: "socks",
};
},
});
</script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>

How to start an application dynamically with second.html in Vue3?

I'm developing a vue3 project.
main.js;
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...
//just try...
app.mount("#app");
and my public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And my App.vue;
<template>
<button #click=openNewPage()>create new page</button>
<span>{{message}}</span>
<router-view />
</template>
<script>
methods:{
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
}
</script>
my store object;
export default createStore({
state: {
message:'Hello'
}
});
and my second.html;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
</head>
<body>
<div id="appSecond" style="height:100%">
<template>
<span>{{message}}</span>
</template>
</div>
</body>
</html>
When I open the second screen with the OpenNewPage method, I cannot access both the store object and the components I want to use do not work. I was try it;
second.js
const app2 = createApp({
});
export { app2 };
and my method
import { app2 } from "../second.js";
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
if (t) {
t.onload = function () {
t.window.app = app2;
app2.mount("#appSecond");
}
}
}
Somehow I try to run in second.html but I get a warning like "[Vue warn]: Failed to mount app: mount target selector". The code didn't work anyway. Can you help me?
openNewPage() can't run a script for the newly opened page; only the new page could run its own scripts. When openNewPage() tries app2.mount(), it's running that code on its own page (not the new one), leading to the error you observed.
Solution
Remove the mounting code from openNewPage() so that it only opens the new page:
export default {
openNewPage() {
window.open('second.html', …);
}
}
Update second.html to load the script that mounts the app, and remove the unnecessary <template> within the <div id="appSecond">:
<body>
<div id="appSecond" style="height:100%">
<span>{{message}}</span>
</div>
<script src="./second.js"></script>
</body>
In second.js, add the code that mounts your app:
// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#appSecond')

VSCode not properly importing my main.js file

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'
}
}
})

Uncaught ReferenceError: Vuetify is not defined

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>

Categories