This is part2 of creating a component library using vue3 and rollup. we will be building a rollup configuration so that we can build our library.

Lets install few rollup libraries that we require
yarn add @babel/preset-env@7.12.1 @rollup/plugin-alias@3.1.1 @rollup/plugin-babel@5.2.1 @rollup/plugin-commonjs@14.0.0 @rollup/plugin-image@2.0.5 @rollup/plugin-node-resolve@9.0.0 @rollup/plugin-replace@2.3.3 @rollup/plugin-url@5.0.1
rollup@2.30.0 rollup-plugin-postcss@3.1.8 rollup-plugin-terser@7.0.2 rollup-plugin-vue@6.0.0-beta.10 rimraf@3.0.2 cross-env@7.0.2

lets update our babel.config.js

rollup-plugin-vue will be used to process vue templates and rollup-plugin-postcss with handle our postcss.

Now that we have all our dependencies we can write our config.Lets create a rollup.config.js, …


We will be using vuejs3, postcss and rollup to build our project.

vue3 project can be created using vue-cli:

Once we complete all the steps to create our project. our project directory will look something like this


In this article, we will see how can we reuse our markdown files across our site. For this, we will be using Hugo short-codes which enables us to write short code snippets.

we can quickly get started with Hugo by few command:

brew install hugo

hugo new site quickstart

this will create a new Hugo project. Let's add in few default files that are required to get our site live.

we will create _default folder in layouts that will have baseof.html

we will have to create _index.md inside content folder which will be our homepage

and update a…


with vue 3 in the horizon, it would be nice to check what new features are being added in it. With Composition Api, ref, reactive being few new features added we can test these on our current vue app with the help of few libraries.

You can read more in detail about the composition api, ref and reactive from the following link

we will use vue-cli-plugin-vue-next to get these new features on or project using this command, this will add beta version of vue-3 in our project

one of the key features of vue 3 is code…


Hooks are the new features that is being introduced in 16.8, in this we can use STATE without writing in Class syntax.

There are different hooks which are being introduced with different functionality of each:

We can implement all the lifecycles methods via these hooks with some subtle changes and we can implement own customHooks. There are few rules when dealing with hooks you can read more on it.

In this article we will see how can we implement your own hooks, will be adding two customHooks i.e useTimer and useDataFetcher. …


Monorepo is a way through which we can maintain multiple projects in a single repository wherein each project will be isolated from each other.Benefits of having a monorepo are code reuse, dependency management and code visibility across team.

In this post we will be creating a monorepo that will contain a react-native project, a react-native-web project and a common package has code which is used across both native and a web project.

Create MonoRepo:

To create a mono repo we will be using Lerna. Its an tool to manage js projects with multiple packages.


Treeshaking is a technique through which we can eliminate redundant code.As project grows bigger more code gets added to the repository and the bundle size goes on increasing.

Webpack has the feature to remove unused code via its various plugins and treeshaking depends upon the way code is written.If the code is written in commonjs format using require.

With esnext module system we can easily write a code that can be treeshaken using import and exports syntax.

Lets create a little demo project in which we can test treeshaking.

these…


write a code which can be used in ios, android and web for react apps.

Intro

Recently i started working on react-native and react-native-web is also in the market for web i.e we can write can create webapps also with react-native using react-native-web.Now writing components for native and again then for web would be to heavy a work and thats where react-native-web comes in picture.

Want to read this story later? Save it in Journal.

ReactNativeWeb converts your code to dom interpretation like your View to div internally which can then be used to render in browsers.Lets create our project


In this article I use react react-native-web and typescript to create a react native web project and it also uses storybook for development of stories of your components.

now lets create few folders to have components, create src folder for components and typings folder for our type declarations /src and /typings.

inside src folder make index.tsx for registration of our App Component and a components folder add the following snippet. index.tsx will be entrypoint of our web project.

lets create…


A journey of 28 days began on 21 Aug 2019, little we knew that these 28 days will be the most exerted days of your life till now as well as one of the most memorable days we might ever have in our lifetime.

National Institute Of Mountaineering and Allied Sports.

The whole course was covered in 3 Phases (Dirang, New Melling and Meerathang) having 2 major activities Rock Craft and Ice Craft although we had some water activities it was mostly for fun.

DAY 1

After receiving all the equipment on the day of arrival, day 1 marked the start of our activities, we woke up around 5…

shubhadip maity

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store