Are you new to the Nuxt.js framework and totally overwhelmed by the number of folders it comes with? Are you also surprised that most of them are empty with just the readme file in them? Well, that’s where I was little over a year ago. Since then, I’ve always wanted to learn and document the magic that each folder brought into the Nuxt project. And now, after implementing a few projects with this

Create a reusable button with Vue Dynamic ComponentsIn the good old days, we used to style things using classes. We'd have a .button class that could be used anywhere in our application and that's it. Easy, right? If you are building any kind of application, it's very likely you have a Button component. You know, a button that can be clicked and multiple things can happen: go to a different page,

Transitions in Vue.js are really great. There is no doubt that they can bring your app to life very easily but often you have to write them from scratch in each project or even bring some CSS library like animate.css to make them look good. What if we could encapsulate these into components and simply reuse them across several projects? We will look at several ways to define transitions and dig ou

Vue.jsコミッターkazuponに聞く、良質なDX（開発体験）がもたらす良質な開発サイクル 近年大きな注目を集めるフレームワークとなったVue.js。その発展の裏には、開発コミュニティをストレスなく駆動させる、コミッターたちのさまざまな工夫がありました。黎明期からVue.jsを支える、コミッターの川口和也（kazupon）さんに、フレームワークを躍進させるために必要なことを聞きました。 WebアプリケーションのUI実装を簡単に行える、オープンソースのJavaScriptフレームワーク・Vue.js。利便性の高さと導入の容易さから、近年サービスに採用されるケースが増えています。 そして、Vue.jsの黎明期から、コミッターとしてフレームワークの成長を支えてきたエンジニアがいます。Vue.js日本ユーザーグループの運営に携わるkazuponこと川口和也（かわぐち・かずや／ @kazu_po

Introduction Loading indicators improve UX (user experience) in any application—web or mobile. These animations provide feedback to the user that an action is being carried out and a result will return shortly. In web applications, there are two major events that need loaders: Network requests like navigating to a different page or an AJAX request. When a heavy computation is running. This article

Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. Th

Yuhei FUJITANaoki HabauiuifreeKatashinubugeeei田中弘治yamanokuNatsukiJabelicナイトウコウスケkzhrk江崎伸英Haoqun JiangDaisuke Fujimoto近藤信幸SerKoyug1224Re:VueDelton DingLemonNekoみなみ@hecateball西脇美穂odan.ごっち(Goto Yuta)tsukkee白石 祐大IlyaLかみくずmizdrakoyasaekijiyuujinうめのこみっちーヨウR.Okuyamaぽにょ@ponyoxa@cyber_snufkinHaruki Tetoneいのうえたくやmew-tonみずのHiroki Osame森田 竜一郎松永貴照 日本最大級の Vue.js カンファレンス、Vue Fes Japan が今年も帰ってきます！ Vue Fes Japan は

はじめに 年末にふとVue.js勉強したくなり、おみくじコンテンツを作ってみました。 銀河おみくじ出張所 今年、Adobe Creative Cloudを契約したこともありどうしてもWebpackで動的にAnimate CCで作ったアニメーションを載せた、おみくじを作ってみたくなり技術調査を始めました。いろいろつまづいたので苦労した点などを載せようと思います。 ※今回はES2015でJavaScriptを書いてみました。 Animate CCのアニメーションを掲載するのに導入したnode_modules createjs exports-loader imports-loader ES2015、Webpackでアニメーションを載せるのに苦労した点 CreateJSをimportで使うことが出来なかった Vue.jsなどはimport Vue from 'vue';で読み込むことが出来たがC

はじめに 本記事ではモーダルの管理について記載しますが、 他の「どこからでもユーザーアクションによって呼び出せる系のUI」は、基本的に同じ考え方で実装が可能だと思います。 本記事で書いたソースは以下にアップしています。 https://github.com/RikutoYamaguchi/vue-vuex-modal 実装はvue-cliをベースに行っています。 記事の内容とは関係ないので説明は省きますが、scssのコンパイルのために以下をインストールしています。 ・"node-sass": "^4.5.3" ・"sass-loader": "^6.0.6" 追記： さらに発展させたものを書きました。 Vue・Vuexでモーダルを管理する - その２ Vuexの導入 vue-cliによるスキャフォールディングにはVuexのインストールは含まれないので、はじめにVuexのインストールを行いま

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

//variable declaration for the global repeated animations const gear = $("#gear1, #gear2, #gear3"); ... //animation that's repeated for all of the sections function revolve() { let tl = new TimelineMax(); tl.add("begin"); tl.to(gear, 4, { transformOrigin: "50% 50%", rotation: 360, ease: Linear.easeNone }, "begin"); ... return tl; } const repeat = new TimelineMax({repeat:-1}); repeat.add(revolve())