I created blank Vue3 + Vite project using
npm init vue#3
I am wondering how can I install my components from src/components like for example in lodash library:
npm i lodash.debounce or my-app/component
Thank you!
I have tried to create index.js file in src and export components:
import Button from "#/components/Button/Button.vue";
import Header from "#/components/Header/Header.vue";
export default {
Button,
Header
}
but it didn't work.
I found a solution, it is called Monorepos, Lerna implements the thing I need.
Here is the link
Related
I just learned import/export for JS today but I saw this code from here but it uses something like,
import { modal, configure } from 'web3-login';
But I thought it was supposed to be like,
import { modal, configure } from './web3-login.js';
What does web3-login mean? It is a shorthand?
And also, I can't an export anywhere in the code. I thought we should have like,
export function modal()
How come?
UPDATE: I originally found the file when I downloaded from - wordpress.org/plugins/ethpress but it doesn't use node. It's just a WordPress plugin. And there're no traces of web3-login text in a function or export.
-- when you are importing from node_modueles you use just package folder name like 'web3-login'
-- when you import some exported function from your project structure you use './web3-login.js'. this means you are importing some function that is exported from same directory that you are currently into.
It uses web3-login instead of ./web3-login.js because it's downloaded with npm (Node Package Manager). If you were trying to import a local file you have created yourself in your folder structure you would use: ./web3-login.js but because it's now referring to a npm package you won't have to write more than just the package name.
I'm trying to make a package in typescript, this one in particular. But after installing it locally in my project with yarn add file:../parascan-js, I can't import the modules correctly.
I expect import options for my package to be parascan/components/* (name changed from uikit) but what I see are the file/folders in the root such as src, dist, tsconfig etc. I want to be able to import with
import {Table} from "parascan/components/info"
Instead of this
import Table from "parascan/src/components/info/Table"
I've tried building dist folder with tsc and babel. Made some changes to package.json by adding type: module and module: dist/index.js but nothing worked.
Another way to look at this problem is using a generic common package like #chakra-ui/react as example. Text are imported with:
import { Text } from #chakra-ui/react
And not:
import { Text } from #chakra-ui/react/src/index
//or
//import { Text } from #chakra-ui/react/dist/index
I'm new to js/ts, so articles on how to create packages would be helpful.
I am creating a library of components. In this library, I created one component, connected it locally via npm link to my project, all work, the component was displayed. But when I decided to include styled-components to create a component. Here is my component.
import React, {FC} from 'react'
import styled from "styled-components"
import './mytbc.css'
export interface MyButtonProps{
color:string;
big?:boolean;
}
const MyCom: FC<MyButtonProps> = ({children, color, big, ...props}) => {
const MyCommon = styled.button`
background:${color};
padding:10px;
`
return (
<MyCommon>
{children}
</MyCommon>
)
}
export default MyCom
Then errors appeared in the console.
How to fix these errors and what are they related to?
I also had similar case when I was working with lerna and yarn workspaces. In my case the problem was using multiple and different versions of react, some where hoisted some were not during lerna compilation process.
According to docs
In order for Hooks to work, the react import from your application
code needs to resolve to the same module as the react import from
inside the react-dom package.
Run this command to list installed versions of react. And if you see more than one React, you’ll need to figure out why this happens and fix your dependency tree.
npm ls react
OR
yarn list react
Read more about the problem and solutions here
check that you have styled-components in your dependencies in file package.json
by:
cd project_name/src
npm install styled-components
I don't want to use Vue-Material nor Vuetify.
I want to use Materialize.
What I do is:
npm install materialize-css#next
In main.js, where my new Vue App is defined I import Materialize like this:
import 'materialize-css'
Somehow the javascript is working, but the CSS is not loading; I test it with a Card Reveal.
The swapping animation works, but it is not styled. Card Reveal is one of the reasons why I want to use MaterializeCss, those other two don't provide this functionality. And I also want to use 'normal' HTML elements instead of using 100 of new elements (for example in vuetify).
Step 1: installation
npm install materialize-css#next --save
npm install material-design-icons --save
Step 2: import materialize css in src/main.js
At src/main.js
import 'materialize-css/dist/css/materialize.min.css'
import 'material-design-icons/iconfont/material-icons.css'
Step 3: initialize materialize components
Add following code in your component(say App.vue):
import M from 'materialize-css'
export default {
...
mounted () {
M.AutoInit()
},
...
This line imports the javascript (the entry point of the npm module from node_modules folder):
import 'materialize-css'
To import the CSS files just do this:
import 'materialize-css/dist/css/materialize.css'
I would also recommend you add the materialize css CDN in the index.html. Aand also create a script tag and add this:
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
});
I am sorry upfront for the pretty noobie question, but I don't know how to import plugins installed with npm. I would like to use this plugin for Vue, I have installed it with npm, in my project, and would like to import it to my main app.js file so that I can use it in Vue.
I have tried with using the path to the file in dist folder:
import MaskedInput from 'node-modules/vue-masked-input/dist/MaskedInput.js'
Vue.use(MaskedInput);
But, that obviously didn't work, what is the right way to do this?
Following the link this is actually a component, so what you could do in your component is:
import MaskedInput from 'vue-masked-input'
export default {
components: {
MaskedInput
}
}
What usually helps is by clicking through to the actual github page, and look for either an example in the README or in the actual code. In this case:
https://github.com/niksmr/vue-masked-input/blob/master/src/App.vue
There it shows you how you can use it 'in real life'