I've installed this with npm : https://github.com/hchstera/vue-charts
Doing npm install hchs-vue-charts
Which is a package to make charts in my views.
I just want to know how to import this lib from node_modules in a single component in Vuejs with the Vue-cli app (https://github.com/vuejs/vue-cli) because in their examples they do it with an instance of Vue.
Thank you
you must install module in main.js
import Vue from 'vue'
import VueCharts from 'hchs-vue-charts'
Vue.use(VueCharts)
then use component everywhere in you app, like this:
<template>
<div id="app">
<chartjs-line></chartjs-line>
</div>
</template>
other components in lib:
<chartjs-bar/>
<chartjs-horizontal-bar/>
<chartjs-radar/>
<chartjs-polar-area/>
<chartjs-pie/>
<chartjs-doughnut/>
In main.js import vue-charts and init the plugin like this:
import VueCharts from 'hchs-vue-charts'
Vue.use(VueCharts)
Related
I am building a React component library which contains some translations, but I want these translations to be provided by the user of my package.
The reason for this is that these translations should be customizable, and I don't want to include every possible language in this package.
So what I'd like to achieve is to use useTranslations inside my component library like this:
import React from 'react';
import { useTranslation } from 'react-i18next';
const MyComponent = () => {
const { t } = useTranslation();
return <div>{t('helloWorld')}</div>;
};
And somehow the 'helloWorld' translations should be configurable by the user of the library.
Is there any way to achieve this?
Apparently this was caused by yarn link using two versions of react-i18next.
To solve this I've configured my app to use the react-i18next version of my package:
cd my-package/node_modules/react-i18next
yarn link
cd my-app
yarn link react-i18next
Now my package uses the i18next instance configured in my app.
I created Electron simple project using create-react-app. I'd like to use react-table component but I have a problem importing its css. Before that I added react-bootstrap to the project.
There's really not much code beside:
npx create-react-app my-app - Created project
npm install react-bootstrap - Added bootstrap
npm install react-table - Installed react-table
I added this to the App component:
import { useTable, useSortBy } from "react-table";
import "react-table/react-table.css";
... and I'm getting this error in the browser:
./src/components/App/App.jsx Module not found: Can't resolve
'react-table/react-table.css' in
'/Users/foo/Projects/test-project/src/components/App'
It's just a css file, that I'm having problem with. import { useTable, useSortBy } from "react-table"; works good alone.
Am I missing something? This is the way I usually install npm libraries.
Suppose I have a React Component library called myLibrary.
myLibrary has exported a <Hello /> Component:
import React from 'react';
function Hello() {
return <div>World</div>
}
And myLibrary's package.json specific React as a peer dependency.
Which means it doesn't install React when I npm install it in my other project.
How can I use myLibrary in my preact project without installing React?
In my preact project:
yarn add myLibrary
// main.js
/** #jsx h */
import { Hello } from 'myLibrary';
import { h, render } from 'preact';
render(<Hello />, document.body);
How can I make it all happen without installing React?
This is what preact-compat is for! You'll want to implement per the readme here: https://github.com/developit/preact-compat
I Can Use web-components that generated by Vue-CLI 3 build command (vue-cli-service build --target wc --name foo ./src/App.vue) as a stand-alone
component in a webpage like this:
<script src="https://unpkg.com/vue"></script>
<script src="./foo.js"></script>
<foo></foo>
BUT When I import this component inside another Vue project:
import Vue from 'vue'
import foo from 'foo'
I get this Error:
Uncaught ReferenceError: Vue is not defined
The Vue CLI 3 documentation says that:
In web component mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. The bundle will assume Vue is available on the host page as a global variable.
But it doesn't say that how to fix this problem when you want to use web-components inside another project.
Do you have any Idea?
In fact the statement you quote means that you do not need to use import Vue from 'vue'. Vue can be used as a global variable as it have been added by the script <script src="https://unpkg.com/vue"></script>.
Actually if you want to use components in another project built by vue-cli, firstly you should have a index.js (or any other name) , export components in that file like
export {default as Button} from './button/button'
export {default as ButtonGroup} from './button/button-group'
export {default as Cascader} from './cascader/cascader'
then change the 'scripts' in package.json 'vue-cli-service build --target wc --name foo ./src/index.js'
you can copy the dist dirctory to the node_modules of the new project and then use it(but it is not recommend).you can use 'npm publish' it , and in your new project,use npm install it
I have a React project where I installed Roboto font doing 'npm install font-roboto'. I'd like to import that from my main.js file instead of referencing a CDN in index.html.
What would be the best way to achieve this?
Apparently you can import it doing the following in the main.js
import '../node_modules/font-roboto/dist/styles/roboto.min.css';
UPDATE: As noted in the comments, the following also works.
import 'font-roboto/dist/styles/roboto.min.css';