DEV Community: Leonid Rezvitsky

Vitejs SSR (Fastify, Vuejs)

Leonid Rezvitsky — Fri, 31 Dec 2021 09:01:02 +0000

Vite SSR (Vue 3 + Vitejs + Fastify)

Hey! For this stack, I used:

Repository: https://github.com/Rezvitsky/vite-ssr-vue

Swap layout with Dribbble

Leonid Rezvitsky — Sun, 14 Nov 2021 15:49:21 +0000

I will use:

Repo: https://github.com/Rezvitsky/swap-react-experiment

Chrome Extension (Vue 3 + Vue Router + Typescript + Vite + TailwindCSS)

Leonid Rezvitsky — Fri, 03 Sep 2021 18:01:04 +0000

Background

Hey! To write the extension, I will use:

Vuejs
Vue Router
Vitejs
TailwindCSS
SASS

Start 🚀

To create a new project, run the command in the console:

npm init vite@latest chrome-extension -- --template vue-ts

TailwindCSS

To install TailwindCSS:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

Updates tailwind.config.js:

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

In the project I will use SASS to install it along with TailwindCSS, execute the following commands:

npm install postcss-import

Updates postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

SASS

Install SASS with the command:

npm i -D sass

Create a main.scss file in the assets/scss folder with the following content:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

html {
    body {
        #app {
            height: 100%;
            width: 100%;
            overflow-x: hidden;
        }
        &.popup {
            width: 357px;
            min-height: 600px;
            height: 600px;
            max-height: 600px;
        }
    }
}

Connect the main.scss into the main.ts file

import './assets/scss/main.scss'

Vue Router

To install, run the command:

npm i -S vue-router@4.x

Create router/index.ts file with content:

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Index',
        component: () => import('../views/Index.vue')
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
    },
    {
        path: '/contacts',
        name: 'Contacts',
        component: () => import('../views/Contacts.vue')
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

Connect the router/index.ts into the main.ts file

import router from './router'

For example pages, I created 3 files in the views folder: Index.vue, About.vue, Contacts.vue

Index.vue

<template>
  <div class="flex flex-col items-start w-full p-6 pb-8">
        <div class="flex flex-col items-center w-full p-6 space-y-8 mt-4">
            <div class="flex flex-col items-center space-y-3">
                <span class="text-base">Home</span>
            </div>
        </div>
    </div> 
</template>

About.vue

<template>
  <div class="flex flex-col items-start w-full p-6 pb-8">
        <div class="flex flex-col items-center w-full p-6 space-y-8 mt-4">
            <div class="flex flex-col items-center space-y-3">
                <span class="text-base">About</span>
            </div>
        </div>
    </div> 
</template>

Contacts.vue

<template>
  <div class="flex flex-col items-start w-full p-6 pb-8">
        <div class="flex flex-col items-center w-full p-6 space-y-8 mt-4">
            <div class="flex flex-col items-center space-y-3">
                <span class="text-base">Contacts</span>
            </div>
        </div>
    </div> 
</template>

Manifest.json

At the root of our project, create a manifest.json file:

{
  "manifest_version": 2,
  "name": "Extension",
  "version": "0.1.0",
  "version_name": "0.1.0",
  "description": "Chrome Extension Example",
  "author": "Leonid Rezvitsky",
  "icons": {
    "128": "public/128.png"
  },
  "browser_action": {
    "default_popup": "dist/index.html",
    "default_title": "Extension"
  }
}

Build

To build the extension, run the command:

npm run build

Now go to the chrome://extensions page and enable developer mode.

Click on the button download the extension and select the folder where manifest.json is located in the crust.

Repo: https://github.com/Rezvitsky/chrome-extension-vuejs

Nodemon + Go App

Leonid Rezvitsky — Tue, 10 Aug 2021 11:31:04 +0000

Nodemon + Go

Background

Hey! When developing an application in the go language, it is necessary to restart it every time through the console in order to apply new changes, this is not convenient. I propose to sprinkle it. I will be using the npm nodemon package.

Start 🚀

Install nodemon globally

npm install -g nodemon

For easy launch of the application, I will create a Makefile.

run: main.go
    nodemon --exec "go run" main.go

Here to nodemon we pass the launch parameters and the application itself.

To run the application

make run

Example: https://github.com/Rezvitsky/nodemon-golang-example

VRAT (Vitejs + Reactjs + Apollo + Tailwind CSS)

Leonid Rezvitsky — Thu, 05 Aug 2021 12:36:10 +0000

Background

Hey! I want to share my stack I use, in it I collected:

Vitejs
Reactjs
Apollo client
Tailwind CSS
Typescript
Routes
Light/Dark mode

I plan to update this stack in the future, I am waiting for ideas in the comments.🙂

Repo: https://github.com/Rezvitsky/vrat

Apollo and Vuejs for Vitejs

Leonid Rezvitsky — Sat, 30 Jan 2021 07:32:46 +0000

Apollo and Vuejs for Vitejs

Background

Hey! For me, it was necessary to use apollo-client with Vite 2. And while there are no clean libraries that will work only with Vuejs, then we will manage with what we have. The Apollo team wrote a client only for react and therefore we have to mess things up from: @apollo/client/core

Start 🚀

First, we need to install the @apollo/client package. This can be done with the command below:

npm i @apollo/client // OR yarn add @apollo/client

Then I started setting up the configuration to work with the backend.

// src/apollo/client.js

import { ApolloClient, HttpLink } from '@apollo/client/core'
import { InMemoryCache } from '@apollo/client/cache'

const httpLink = new HttpLink({
  uri: import.meta.env.VITE_API_URL
})

const apolloClient = new ApolloClient({
  link: httpLink, 
  cache: new InMemoryCache()
})

export default apolloClient

We can now import apollo.js into the Vuejs component

// src/components/ApolloHello.vue

<script setup>
import apolloClient from '../apollo/client.js'
import { EXCHANGE_RATES } from '../graphql'

const { data: { rates } } = await apolloClient.query({
  query: EXCHANGE_RATES
})

console.log(rates)
</script>

You also need to make changes to vite.config.js

{
    ...
    optimizeDeps: {
        include: [
            '@apollo/client/core',
            '@apollo/client/cache'
        ]
    },
    rollupInputOptions: {
        external: ['react']
    }
    ...
}

What's next?

We can now use @apollo/client along with Vuejs. To try this stack, you can clone the repository