Develop Reference

Why doesn't vue-timepicker's dropbox appear?

import VueTimepicker from 'vue2-timepicker'
import 'vue2-timepicker/dist/VueTimepicker.css'
export default {
name: 'ActivityDetection',
components :{VueTimepicker}
}
I imported vue-timepicker and css and put VueTimepicker in components
And I put it in the template part well, but when I run it, the dropbox doesn't come out.
<div class="input_area">
<p class="input_tit">EndTime</p>
<vue-timepicker></vue-timepicker>
</div>
Clicking this part doesn't do anything.
Please help me.
Even if I delete vue-timepicker and then npm install it again, it's the same thing.

How to remove CSS from global scope and only import to the specific pages in React, Gatsby

Currently, I am trying to implement a keen-slider library(https://www.npmjs.com/package/keen-slider).
For installation, we need to add import 'keen-slider/keen-slider.min.css'.
In that case, the keen slider CSS is added to global, as you know.
The CSS is included globally in the page markup. From my perspective, it should be included only on pages where the slider is used
Is there any solution to solve this problem?

I'm not sure to understand the issue. You can always choose to import a file (CSS or whichever format you want) globally or in a specific file.
For your use-case, as soon as you install the dependency (npm install keen-slider --save), you will be able to import the minified CSS into the needed component. For example:
import React from 'react'
import 'keen-slider/keen-slider.min.css'
import { useKeenSlider } from 'keen-slider/react'
export function IndexPage(){
const [sliderRef, slider] = useKeenSlider()
return <section className="slider-wrapper">
<div ref={sliderRef}>
<div class="keen-slider__slide">1</div>
<div class="keen-slider__slide">2</div>
<div class="keen-slider__slide">3</div>
</div>
</section>
}
With this approach, you will be only importing the keen-slider.min.css in the IndexPage.

I think, you can try to lazily load your component via:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
Also you should do import 'keen-slider/keen-slider.min.css' inside of OtherComponent.
More info here: https://reactjs.org/docs/code-splitting.html

NuxtJS add external script component not working

I'm trying to embed a script from an external JS, according to the documentation and this post (Include external javascript file in a nuxt.js page) I have something like the following...
<template>
<div>
<blocksurvey-widget>
some details
</blocksurvey-widget>
</div>
</template>
export default {
head: {
script: [
{
type: "module",
src: "https://blocksurvey.io/assets/js/blocksurvey-widget.js",
},
],
},
}
I am wondering why this is not working and throws the [Vue-warn] error:
Unknown custom element: <blocksurvey-widget> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I believe the script is appended to the head, and I think I need to register the component, but I had the impression this would be working normally once the script has been added. Do I have find some way to add the <blocksurvey-widget> component?

Why won't BootstrapVue Render?

I recently used npm to install BootstrapVue with:
npm install vue bootstrap-vue bootstrap
I then included BootstrapVue into the root of my project like so:
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Finally, this is the template I am using to test the BootstrapVue component:
<template>
<div>
<search-bar />
<div v-for="post in posts" :key="post.id">
<post :postData="post" />
</div>
<b-button pill >TEST</b-button>
</div>
</template>
When I go to check the web page, the button appears, but it renders with no styling. The strange thing is that when I check the Vue dev tools extension, the BButton component is recognized and contains all the styling properties included (in this case, just the "pill" option set to true). I even inspect the button element on the DOM and it contains the classes that were passed down from BootstrapVue, but none of those styles were rendered. What am I missing here?
Also, just for good measure, I looked in the package.json file to make sure Bootstrap and BootstrapVue were installed and were up to date. They are.

in your root of your project(app.js), you will need to add 2 more lines
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
To import the css files

How do I use ember-crumbly for non-nested routes?

I'm trying add breadcrumbs to this application using ember-crumbly.
I couldn't find the git repo, so to see the code, you'll have to clone the full application by clicking the button "Download git repository" in Course Material and then go to the branch step-14 by running the following command after going into the repo via command line:
git checkout step-14
I'm adding breadcrumbs by making the following changes to the files:
app/routes/album.js
import Ember from 'ember';
export default Ember.Route.extend({
breadCrumb: {
title: 'Album'
}
});
app/routes/index.js
import Ember from 'ember';
export default Ember.Route.extend({
breadCrumb: {
title: 'Home'
},
model() {
return this.store.findAll('album');
}
});
app/templates/application.hbs
<header>
<h1>BümBöx</h1>
</header>
<div class="breadcrumb">
{{bread-crumbs tagName="ul" outputStyle="foundation"}}
</div>
{{outlet}}
{{now-playing}}
I'm hoping when I go to http://localhost:4200/album/1, it would look like this:
but instead, it looks like this:
I'm guessing it's because my routes are not nested in directories (as in it's not app/routes/home/album.js), which isn't compatible with the demo from ember-crumbly. Can someone help me figure out how to add ember-crumbly to this application? Much appreciate.