Import types in Vue SFC for defineProps

https://vuejsexamples.com/import-types-in-vue-sfc-for-defineprops/
Import types in Vue SFC for defineProps

Как локализовать Vue.js приложение

https://habr.com/ru/post/573894/?utm_campaign=573894&utm_source=habrahabr&utm_medium=rss
Как локализовать Vue.js приложениеОднажды мне понадобилось перевести готовый Vue сайт на несколько языков. Немного погуглив я нашел несколько полу рабочих вариантов как это сделать и решил показать свой рабочий вариант. Подробнее

Что такое v9s, и почему потребовалось писать еще одну библиотеку валидации?

https://habr.com/ru/post/574044/?utm_campaign=574044&utm_source=habrahabr&utm_medium=rss
Примерно год назад фронтенд нашего проекта, в качестве фреймворка для которого используется Vue.js 2, дошел до состояния, хорошо описываемого словами "проще сжечь".К тому времени наш нетипизированный корабль уже трещал по всем швам, и решено было убить сразу нескольких зайцев одним выстрелом: полностью перевести проект на TypeScript, внедрить Vue Composition API и решить проблемы валидации сложных форм.А проблемы были. Vuelidate - отличная библиотека с массой готовых валидаторов и остается таковой до тех пор, пока мы имеем дело с, так сказать, плоскими формами - формами, не использующими вложенных компонентов, также требующих валидации. Vuelidate работает на уровне компонента, требует наличия миксина, содержит массу правил, которые нам не были нужны, но все равно тянулись в составе пакета, поддержка TypeScript и Composition API на тот момент отсутствовала, и мы не могли более с этим миритьcя. Читать далее

Сервис просмотра и редактирования библиотек геометок

https://habr.com/ru/post/574716/?utm_campaign=574716&utm_source=habrahabr&utm_medium=rss
В 2018 решил освоить Vue.js, так, для общего развития, а как известно, лучший способ освоить язык/фреймворк/etc — начать писать. В голову пришла довольно простая идея, которая со временем выросла в довольно большой проект — онлайн сервис «Места», позволяющий создавать свои коллекции мест на карте, геометок, с подробной информацией о них. Собирать их в альбомы, сортировать в дереве папок, просматривать, редактировать, обмениваться с другими, открывать для просмотра другим пользователям сервиса. Привязывать к местам фотоальбомы, экспортировать свои библиотеки в файлы JSON и GPX (для навигаторов, например), импортировать в свои библиотеки места других людей.Идея была проста. Есть множество средств создания фотоальбомов, музыкальных плейлистов — с описаниями, возможностью сортировки, ссылками, преферансом и барышнями. А похожей полноценной картографической реализации толком нет. По крайней мере, я не нашёл.Представьте, что вы пошли с другом в поход. Каждый у себя в навигаторе смартфона отмечал какие-то интересные места — удобные стоянки, опасные пороги, прохождение которых описывал. Потом вернулись домой, и каждый остался при своих. Сервис позволяет собрать их вместе, слив оба набора в один, отсортировать, разложить по папкам, отредактировать описания в удобном интерфейсе на компе, добавить фотографии, ссылки, сделать при желании видимыми другим пользователям сервиса, экспортировать потом, в конце концов, для использования в навигаторах и т. д.Проект свободный (https://github.com/assador/places, сам действующий сервис пока здесь: https://places.scrofa-tridens.ru). Сейчас в планах помимо API Яндекс.Карт, которые отвечают, собственно, за карту, подключить и другие — OSM, 2ГИС и пр. Хочу добавить возможность добавлять к местам не только фото-, но и видео-, и аудиоальбомы. Развивать структуру прав и ролей пользователей, их связь друг с другом на сервисе, расшаривать библиотеки в соцсети и пр. Короче, для меня штука интересная. Читать далее

Vuetify  —  создаем свое простое приложение

https://habr.com/ru/post/575050/?utm_campaign=575050&utm_source=habrahabr&utm_medium=rss
В этой небольшой статье мы с вами напишем свое простое приложение по типу "заказа еды". Само приложение если что будет статичным и здесь главный упор будет сделан на использование компонентов Vuetify и рассмотрение того как именно они работают. Также добавлю что здесь мы не будем рассматривать отдельную библиотеку Bootstrap Vue которую использует Vuetify чтобы строить гриды. Читать далее

[Перевод] Создаём одинаковое приложение 5 раз

https://habr.com/ru/post/575416/?utm_campaign=575416&utm_source=habrahabr&utm_medium=rss
На написание этой статьи меня вдохновил YouTube-канал Fireship, записывающий отличные видео о веб-разработке, крайне рекомендую их посмотреть, если вам интересна эта тема.



Вот видео с канала, в котором в 10 фреймворках создают todo-приложение:





Я решил, что не хочу тратить на это кучу времени, и в основном использовал статью как оправдание для изучения нескольких новых фреймворков, поэтому пять раз собрал одно и то же приложение. Я планирую создать простое приложение для добавления заметок, в котором пользователи могут писать текст и сохранять его как отдельные заметки. Некоторые из этих фреймворков я уже использовал для создания подобных приложений, а в других не делал ничего похожего, или даже не использовал их вообще, поэтому это будет чуть сложнее.
Читать дальше →

Компактные Vue компоненты из самописных SVG иконок

https://habr.com/ru/post/577202/?utm_campaign=577202&utm_source=habrahabr&utm_medium=rss
История вопроса

В этой статье пойдёт речь о том, как я пришёл к тому, чтобы взяться писать плагин, создающий на лету vue компоненты из самописных svg иконок во время сборки проекта, о том, как я это делал, и о том, что в итоге получилось.

Мне уже давно и прочно нравится мир Vue. Особенно завораживает скорость, с которой в нём рождаются новые возможности писать код более лёгким и понятным. Недавно появились Composition API, VueUse, Vite… По ходу освоения этих новых инструментов я нашёл шаблон Vitesse, буквально насыщенный удобными средствами — и для управления макетами (layout), и для маршрутизации, и для локализации и ещё для много чего… Возможно, есть смысл написать отдельный обзор этого арсенала по русски (чего в Интернете пока ещё нет). Но сейчас речь не об этом. Читать дальше →

Vite.js и Vue.js

https://habr.com/ru/post/580064/?utm_campaign=580064&utm_source=habrahabr&utm_medium=rss
Я нашёл только 3 статьи по Vite.js на Хабр, там были некие обзоры функционала и описание фишек данного инструмента.Хорошо, тогда вопрос, что же это за инструмент такой и в чем преимущества использовать его при разработке? Если мы зайдем на официальный сайт - то здесь выделяется 6 основных фишек: Читать далее

Разработка документации на VuePress

https://habr.com/ru/post/580894/?utm_campaign=580894&utm_source=habrahabr&utm_medium=rss
VuePress представляет собой минималистичный генератор статичных сайтов, оптимизированный для написания технической документации.Изначальной целью VuePress, была поддержка фреймворка Vue.js и сопутствующей инфраструктуры. Для примера, можно посмотреть любую документацию по Vue: Vue.js, Vue Router, Vuex, где применяется единый стиль, заложенный в основе VuePress.В ходе статьи мы разберем архитектуру VuePress, разработаем базовое приложение и выложим на GitHub Pages. Читать далее

Создание унифицированного UI без мам, пап и кредитов

https://habr.com/ru/post/581616/?utm_campaign=581616&utm_source=habrahabr&utm_medium=rss
Всем привет! Меня зовут Артём и я разработчик в команде Operations & Support Tools. Наша команда занимается разработкой софта для взаимодействия поддержки с пользователями, с целью решения любых возникших у пользователей проблем.В прошлый раз один из моих коллег рассказывал, как реализовано взаимодействие сервисов у нас в Платформе. Те, кто пропустили эту статью, могут найти её по ссылке. Сегодня я хочу рассказать про приложение, которое раскрыло возможности Contract API с новой стороны. Знакомьтесь, Contract UI. Читать далее

[Перевод] Создание веб-компонентов с помощью Vue 3.2

https://habr.com/ru/post/581954/?utm_campaign=581954&utm_source=habrahabr&utm_medium=rss
Вы когда-нибудь работали над несколькими проектами и хотели иметь набор настраиваемых компонентов, которые можно было бы использовать во всех из них? Будь то работа или просто побочные проекты, набор компонентов, к которым вы можете обратиться, - отличный способ ускорить работу в новом или существующем проекте. Но что, если не все ваши проекты используют одну и ту же структуру пользовательского интерфейса? Или, что, если у вас есть тот, который вообще не использует какой-либо фреймворк JavaScript и полностью отрисован на сервере?Как разработчик Vue, в идеале мы хотели бы просто использовать наш фреймворк для создания сложных пользовательских интерфейсов. Но иногда мы оказываемся в описанной выше ситуации, работая с другим фреймворком JavaScript, таким как React или Angular, или используя внутреннюю систему рендеринга, такую как Rails или Laravel. Как мы можем создать многоразовый пользовательский интерфейс для различных вариантов внешнего интерфейса?В Vue 3.2 у нас теперь есть решение этой проблемы: веб-компоненты на базе Vue! Читать далее

DAY 01 - 100 Days With Vue

https://dev.to/tahsin52225/day-01-100-days-with-vue-22fb
At last, I have started to learn Vue.js. Well, starting is the hard part of learning. Today I have learned about how to integrate Vue CDN and add Vue property to your project.

It's simple just add Vue CDN at the end of your Html file. Vue is ready for use.



Vue CDN


<script src="https://unpkg.com/vue@next" defer></script>





Adding Vue property in a particular HTML section

In your app.js (External JS file) file you have to create a Vue app and mount it into a particular section. Well you can use a variable to declare the Vue app



const app = Vue.createApp({});


To add this Vue app into your HTML code you need to use the mount function to this object. Mount accepts a string value of a CSS selector in which this Vue code applies. Here we have a section that has an id named #user-goal



const app = Vue.createApp({});
app.mount('#user-goal');


Nice ! Vue is mounted on that section



"data" property of Vue object

"data" is a predefined property of the Vue object which holds all the variables of the Vue app. "data" property always returns an object which holds a collection of variable names and values in a key-value pair. the variable value can be anything String, Number

, Boolean etc.



const app = Vue.createApp({
data(){
return {
variable_name : "variable_value"
}
}
});
app.mount('#user-goal');





"Interpolations" Showing data property value

"Interpolations" is a fancy name of handlebars, if you want to show your variable value into HTML. Just use double curly braces and write the variable name which you had declared on the data property.



<p>{{ variable_name }}</p>


"Interpolations" tells Vue to replace the variable name with the actual value of it. so you can't use "Interpolations" outside Vue mounted section.



"v-bind" attribute of Vue

Well, sometimes we need to pass value to Html attribute. For example, let's say you want to return a link to an anchor tag 'href' attribute, but if you use "Interpolations" it won't work. You need to use the "v-bind" attribute for that.

"v-bind" is a Vue attribute that helps to bind any Html attribute to Vue variables. Example :



<p> <a v-bind:href="variable_name">Link </a></p>


P.S: There are more uses of v-bind and we can use the shorter version of v-bind, But for now, let's stick with this.



"v-html" attribute of Vue

Now let's say you want to show an Html code using a variable. If you use only "Interpolations" it will show markup value and won't fulfill the purpose. For that, you need to use v-html attribute.

Example:

In app.js



const app = Vue.createApp({
data(){
return {
variable_name : "<h1> Hello this is value </h1>"
}
}
});
app.mount('#user-goal');


In index.html



<p v-html="variable_name"></p>





"methods" property of Vue object

Till now, we have used only static data. We need to add some dynamic feel to it. To do this, we need to use the "methods" property of the Vue object. "methods" is a predefined property that accepts only JS objects that hold the collection of functions.



const app = Vue.createApp({
data(){
return {
variable_name : "<h1> Hello this is value </h1>"
}
},
methods: {
function_name: function () {
//do something
}
}
});
app.mount('#user-goal');


We can use direct methods in "Interpolations"

In index.html



<p> {{ function_name() }}</p>





Use "data" property into "methods"

Basically we need to use variable into methods for that we just need to use "$this" keyword.



const app = Vue.createApp({
data(){
return {
variable_name : "<h1> Hello this is value </h1>"
}
},
methods: {
function_name: function () {
$this.variable_name = "new value"
}
}
});
app.mount('#user-goal');





Github Practice Code






Tahsin-Ahmed52225
/
100days-with-Vue

An explosion of confetti as a Vue 3 component

https://vuejsexamples.com/an-explosion-of-confetti-as-a-vue-3-component/
An explosion of confetti as a Vue 3 component

The Web App that helps you to mange the Tech Communities

https://vuejsexamples.com/the-web-app-that-helps-you-to-mange-the-tech-communities/
The Web App that helps you to mange the Tech Communities

A Sticky Slider Example For Vue

https://vuejsexamples.com/a-sticky-slider-example-for-vue/
A Sticky Slider Example For Vue

Add a Github corner to your project page, This GitHub corner for Vue 3.0+ component

https://vuejsexamples.com/add-a-github-corner-to-your-project-page-this-github-corner-for-vue-3-0-component/
Add a Github corner to your project page, This GitHub corner for Vue 3.0+ component