I am using styledcomponents in my CRA. The thing is that when I inspect an element in the browser all I see is something like this:
<div class="js-cskdjf fdsfsjk fdsfds">..</div>
No idea what component this is , how can I figure this out? I have ejected the app too.
If you are using CRA v2, then it supports babel-plugin-macros
You can use the babel macro from styled components by changing the main import to:
import styled, { createGlobalStyle } from 'styled-components/macro';
This will bring in all properties of the babel plugin that styled components (which you will have to eject to add) This includes better debugging experience, by showing component names inside the devtools. More more information on this, read docs here.
You can use 'React Developer Tools' extension to see the Components layout:
for Chrome,
for FireFox.
Related
I have added ReCaptcha plugin using Vue.use(ReCaptcha, {some options}) in Gridsome main.js which is displaying on all pages.
How to add plugin for a particular page only in gridsome?
I've never used ReCaptcha or Gridsome before, but generally, if you install a plugin using npm, then the simplest way to use it on a single page would be to import the plugin to the specific component rendered on the route you want to use it on. i.e
/* === MyComponent.vue === */
<script>
import plugin from 'packageName';
// or
import { pluginExport } from 'packageName';
export Default{
// You can then use the plugin/pluginExport here
}
From there you should be able to use the package in that specific component as you normally would if you implemented it app-wide with Vue.use. In some cases, depending on how the plugin is meant to be used, you may need to register the imported plugin Module as a child component in the components object. Like this vuejs QR Code generator for example.
I am trying to use a <b-form-datepicker> in a vuejs application.
Browser tells me the error:
[Vue warn]: Unknown custom element: <b-form-datepicker> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I am using other bootstrap-vue compoments without problems.
Giving it a 'name' property does not change a thing.
What am I missing here?
The documentation on https://bootstrap-vue.org/docs/components/form-datepicker does not talk about registering any components. (Did I miss a basic fundamental patr when and how to use components?)
I am using the template-script-style pattern for building this part of the gui.
In my main.js Í do have a declaration of import BootstrapVue from 'bootstrap-vue';
On other locations using bootstrap-vue elements it works out of the box as far as I have seen.
Somewhat nearest other issue about that for me was https://stackoverflow.com/a/51410592/845117.
But there I am missing the link of the documentation of naming components as well as the import statement with the 'custom' path: import { Alert } from 'bootstrap-vue/es/components';
Did I miss a major part? What is the missing link here for me?
#Hiws is absolutely right.
The deal was with the version. I am missing the experience with the npm system.
Thank you!
What is the correct way of importing javascript modules into vue-components?
I currently have a vue-component component.js:
Vue.component('component', {
name: 'component',
props: ['pdf'],
template: ` ...
I want to take a pdf-url as a prop and use pdf.js within the component, but I'm having trouble finding the right way/standard way to import pdf.js into my project.
Worth noting is that I'm not using vue-cli, or any other kind of bundler like Webpack, so my project structure might be a bit different from standard project structures. I access my components from a main.html file in which I have imported both vue and the components in script-tags in the head of the html. Would I simply import pdf.js in the same manner (head in the main.html file), or is there a "vue"-way of doing it?
If you are not using webpack or any other packager, then I will recommend you to stick to the old fashion way, just use pdf.js as script in your html and make use of the API as it is in the official documentation, such as: pdf.getPage(1).then(...)
Hope it helps.
Cheers
I have installed VueJS chrome extension:
VueJS chrome extension
but I find it quite useless unless I am missing something. So I posted the question here if some one can provide what I am missing.
I setup this vuejs project:
Kazoo on github
This project has several vue components but most of these components do not show up in vuejs chrome extension. This is the screenshot:
The Vue devtools show the application as you are viewing it now (just like the DOM viewer shows you the DOM elements that are currently on the page). Clicking a component will show you the internal state of that component, such as props and data. This allows you to infer where a problem may be originating when you see a bug occur in your application. It also allows you to figure out if the correct components are being loaded. It does not show you components that are currently not in the document, as it would not be useful.
The vuex tab will allow you to inspect the entire store, and all mutations that have been done and with what payload since the vue devtools initialised. It will show you what is computed by the getters.
The Events tab will show you which events have been fired. This may be particularly nice if you have a framework that uses them, or if you use global events yourself.
Is it possible to use VusJS Components into Moqui Screens?
I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.
The need comes from the following scenario:
While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.
If there's no way to use vue, maybe you can help me with my concrete issue.
In the 'vuet' render mode which is used in the /vapps path (as opposed to /apps) it isn't actually HTML sent to the client it is a Vue Template. If you look at the text returned by the server you'll see a number of Vue Components already being used (see the WebrootVue.js file for their source). You can see this in Chrome using the Sources or Network tab in the tools window or similar tools in other browsers. If you inspect an element you'll be looking at the rendered HTML, ie after Vue runs the components to change the Vue Template to HTML.
This means that if you include the necessary JavaScript file(s), and CSS file(s) if needed, then you can use any Vue component in the Vue Template returned. You can do this inline in XML Screen files using the render-mode.text element with the #type=vuet.
None of this runs under NPM in the way VueJS is used in Moqui Framework through XML Screens. In other words it isn't a pre-packaged Vue app with 100% client/browser rendering but rather is a hybrid client and server rendered approach.
You can include scripts in this Moqui hybrid approach using the script element with a #src attribute for the script file which the WebrootVue.js file loads on the fly. There are various examples of this for additional JS scripts like Chart.JS