What are /r/vuejs' favorite Products & Services?

From 3.5 billion Reddit comments

The learning curve for Vue is a lot less steep than React or Angular in my opinion. I'm biased because I use Vue a lot now, but it took me less than a week to get comfortable with Vue+Vuex. I tried Angular a lot before and it never felt anything like as natural or enjoyable as Vue. I think React is great but I don't find it as fun (personal preference).

Since the start of 2017 I've almost finished two Vue SPAs and have started on a third. That's alongside building APIs for each using Laravel/Processwire as the only dev at my company. All use Vuex and have SSR. It haven't felt this efficient on the front end in a long time, so I would really recommend it. If you'd like some links to the resources I used when I started out I'd be happy to share.

EDIT: Both of these have already been mentioned but I'd really recommend this Udemy course. It's currently listed at £190 for me, but I bought it for £11 during a promotion. Udemy is strange, often courses drop to under 1/10th of the price seemingly randomly. Either way it's certainly worth a lot more than £11. It's a little slow at times but certainly the most comprehensive Vue tutorial I've found. As people have mentioned, the Laracasts series is currently free and a pretty solid introduction.

To anyone disappointed by the new syntax check Svelte.

It has single file components much like .vue files. It is way faster than Vue and one of the most lightweight frameworks available.

Great article! Really clean and to the point.

A thought:

> Whenever it’s possible, I’d recommend to use dynamic imports to import components.

I would say it's probably not better to use this technique whenever possible.

After using code-splitting with webpack in a medium-large sized project, tweaking the chunk sizes and such, I've come to the conclusion that you should only use dynamic imports at the route definition level. If you do that, then you can use webpack hints to name the chunks meaningfully. It's hard to find in that documentation link, but this is the important line:

return import(/* webpackChunkName: "lodash" */ 'lodash')

or rather

const SomeComponent = import(/* webpackChunkName: "some-component" */ ./some/path/component.vue)

I've noticed that if using micro-chunks, even though webpack does a good job chunking every single import out during the build process, at runtime the website load time is slightly higher than using slightly bigger macro-chunks. I tweaked webpack chunk settings for a few hours to find that minimum 30-32Kb and maximum 64-96Kb gives the best results (webpack will automatically create common chunks for reused code between chunks). Your mileage may vary.

Happy coding!

I think the point is that it is organized... but in a way that isn't necessarily logical. You're grouping them by the type of thing they are, rather than the function they provide. Look at the examples here, and how they divide the reactive properties into groups by functionality, rather than whether they're methods/computed/data.

Let's leave Vue behind for a second. Think about it that way: what if in TypeScript you had to declare variables like this:

array { dialogs, popups, listItems }

boolean { isDialogOpen, isPopupOpen, isLoaded }

string { dialogsTitle, popupsButtonTitle }

as opposed to

// Dialogs dialogs: array isDialogOpen: boolean dialogsTitle: string

// Popups popups: array isPopupOpen: boolean popupsButtonTitle: string

// Is loaded isLoaded: boolean

Technically, the first way is more "organized". But it's organized in an arbitrary way, that spreads blocks of functionality across various sections.

Plus, in the second way, you could encapsulate one of those bits of functionality (that includes mixed computed, data and methods) into a separate function, and reuse it in other places.

I'd recommend Quasar. I used it now for multiple projects. It's a framework that expands vue. You can do anything you would do with vue and more. It supports Ionic capaciator so you have one codebase for web, android and ios. Also you don't need a ui framework like vuetify or anything like that. The documentation is great as well.Quasar got a large updated recently with vuejs 3 support. I'd recommend you check it out.

We just launched our first Vue Project and reallly enjoyed working with the framework. We are still in beta but I wanted to share our stack and technology.
Front-end:

• Vue SPA PWA
• TypeScript
• Vue Class Components
• Vue Property Decorators

Backend:

• ASP.NET Core

DB: 

•     PostgreSQL

We are using Firebase authentication, but using our .net core middleware for authorization. Not using Firestore and document based databases. Feel free to ask any questions regarding our development experience.Thanks
www.clipd.io

I've used element-ui in a couple of projects and I like it a lot.

You can save bandwidth by importing just the needed elements, it has nice docs and changing the theme is almost easy :)

The official tailwind docs also have instructions for doing this with Vite. Pretty much identical apart from the first command https://tailwindcss.com/docs/guides/vue-3-vite

As Towerful said, it's not about symbols, numbers and stuff. Length is the key component and whether the password has previously been seen in a breach. For that you can use PwnedPasswords service: https://haveibeenpwned.com/API/v2#PwnedPasswords

It has a lot of built in functionality that saves me time. It has an easy build process for SPA, SSR, Electron and some others. On top of that it also has a lot of useful components that save me a lot of time.

For example, I have an icon manager app (https://norde.io) that builds to Electron, there is almost no difference in building that vs this Baseline SPA app, which is incredibly nice. The main difference is just a build command.

My main pet peeve with it is that it's very Material Design oriented, and I'm not the biggest fan of Material Design, but I just make it work anyway.

It was only a small change to the docs, but one I'd been wanting for ages: they've finally put the API at the top of the page!

The docs still aren't the greatest to read if you kinda know what you're after already. A toggle to expand all the code snippets would really help this. That way I can just open up a docs page, toggle all the code to be visible, and then ctrl+f for what I'm trying to use to take myself straight to an example.

The docs, as they are atm, are still very much like window shopping. If I know I want a q-card then I can go to the docs page for it and scroll through to see what sort of stuff I can do with a q-card. But if I'm already using a q-card and I'm trying to align some q-card-actions it'd be nice to ctrl+f for align=.

Obviously that is a pretty contrived example as you'd just go to the With actions section, or even just searching for alig gets me to the Aligning actions section. But there are certainly times where you just want to search their example code instead of scrolling through the docs trying to find the example for what you're already doing.

But don't get me wrong, their docs are far and away better than most docs I've ever used. They've got a search bar that works, so they're already ahead of the vast majority of libraries out there...

If you want something truly custom you'll have to roll your own. Perhaps merely creating your own components with something such as tailwind.css can help you with this.

Similarly, there's nothing stopping you from using something like Vuetify and changing how it looks yourself. For example even just changing the base font will immediately change the material look.

Vue.js has various component libraries. My favorite is Vuetify, a complete Material design framework... the components takes some time to master, especially for someone who is not familiar with material design, but the official documentation is very helpful, with lots of practical examples for each component type. And they can be easily customized by playing the built-in attributes and classes, or adding custom CSS. The default look is Google's Material design, but you can style it, just like with normal HTML + CSS.

Yep, have downloaded and installed it, then went through the docs start to finish, testing its various configurations and features.

It's definitely going to be core part of the Vue ecosystem, especially for those who want to write docs.

I'd say that Docsify has the edge for ease of use, and is more useful getting up and running quickly for smaller projects, such as libraries. I prefer Docsify's markdown sidebar, as you generally don't need auto-linking when a your pages are well-structured and bite-sized.

You can also write plugins, jQuery style, in Docsify which makes it really easy to add new functionality. They hook into Vue's lifecycle hooks like afterEach, mounted, etc, then you can modify the generated HTML, such as upgrading links, adding a footer, etc.

VuePress has a much tighter integration with Vue though:

• you can customise everything if you "eject" the default theme, which gives you a folder of components
• you can supposedly add in-page interactive demos a bit more easily than Docsify (though I didn't really play with this yet)

It's only on version 0.43 or something, so I'd expect there's still room for improvement / maturity.

1. SEO

Nuxt can be set up to server-render (or even statically render) pages, meta description and so on can be added to the head. So this isn't really a valid concern if your team is aware this is a requirement.

1. Routing

Nuxt should be handling this, not sure what the codebase looks like (there's tons of ways to shoot yourself in the foot but it can be done correctly).

1. ES2016

This is the latest ECMA standard, might take you a bit to get used to but it's the future of JavaScript and mostly allows you to write better code faster.

1. Long-term support of Vue

Vue is set up to be sustainable (ish), if you want to make sure of this, donate to Evan You's patreon and the Vue open collective.

https://eslint.org/docs/2.13.1/user-guide/command-line-interface

eslint --fix

Fix your linting errors as you develop, and they won't pile up. Get in the habit of abiding by your linting rules so you don't have errors to fix. It'll make you a better developer in the long run.

(TL;DR here is a working example for a possible solution)

Directly, that is impossible for the reasons you yourself outlined - @click="componentMethod" is only possible in component templates, so compilation is mandatory. That means there are 2 possibilities:

• Mount a component with the loaded content as a template - this may be possible, and it would allow binding, but I wouldn't recommend this as you really have no control over what gets passed as a template (injection attacks would be simple)
• Take control of the injected HTML, and manually bind any listeners. This is trivial - just use a directive to set innerHtml (possibly with a sanitizer like sanitize-html)

Here is an example of a simple "bound-html" directive on CodeSandbox. Couple of notes:

• No sanitizing added (easy to add prior to setting innerHtml
• Only binding to click at the moment
• @click isn't a valid attribute so it cannot be in the html content (it isn't strictly speaking a template). You can:
  • Define an alternate naming scheme, html-compatible (as I did)
  • Transform the string from @foo to x-bound-foo before setting innerHtml
• No arguments are parsed at all
  • This should be trivial, if restraining yourself to string arguments only, by running a Regex on the attribute value

Hello fellow redditers :)

I wanted to share with you my first project written in Vue: 🌚🌞.ws

It's an app to find events around you happening during the coming total solar eclipse in the US.

Hope you like it :)

It was also posted on ProductHunt: https://www.producthunt.com/posts/ws-defef322-dd6e-413c-82be-530f01f8b4dd

TLDR: Vue 3 support is now in Storybook 6.2 beta!

This is one of the most requested integrations from Vue users and folks in this subreddit.

SBs core features/ecosystem included:

• Zero-config setup
  
• TS support
• Auto-generated controls and docs
• Automated testing
• Hundreds of addons

What is Storybook?
Storybook is a development environment for UI. It helps you build UI components in isolation. That makes it easier to develop and test hard to reach states (e.g., error, loading, etc).

There is this https://github.com/mimecorg/vuido . it is not exactly what you are looking for but it allows you to build native desktop apps using vue without electron. It is light weight runs on windows, mac and linux.

Seems off that you had to put them in your components folder as I believe the ‘complex store’ on this page fits your use case.

https://nuxtjs.org/docs/directory-structure/store#example-folder-structure

The Vuetify docs are generally quite good. https://vuetifyjs.com/en/components/avatars

​

In general though you will need to know some Vue basics. Mostly props, v-model and slots to get the most of Vuetify. If you don't know those concepts first I'd head over to the official Vue docs and make sure you understand the basics of Vue before trying Vuetify.

Are you using firebase auth as well? Since that should do this for you anyway.

Otherwise you may have some success looking in this direction or this one.

You can just import the vue.js file from cdnjs into your html, like we used to do with jQuery.

I hate having to compile JavaScript, I see the benefits, but it can really slow down development for larger projects.

Check here http://vuejs.org/v2/guide/

As u/lucuma says, look into computed properties, that's exactly what they're for.

Here's a pen with an example.

Computed properties are reactive, and, though you might be tempted to use watchers (which Vuejs comes with out of the box), especially if you're coming from a framework such as Angular, as the Vue documentation says, most of the times you can solve everything with computed properties, which are less complicated.

Cheers!

edit: thanks, bot!

I’m using it with Vue.js v3 and I have no issues at all. And instead of watch somebody else, why not just dig in the official docs? https://firebase.google.com/docs/guides

Ps: do you sure you installed the Firebase dependencies?

Edit: fix docs link

I dont use Vue anymore, but I think it should be possible with Vetur and the latest VSCode Update: https://code.visualstudio.com/updates/v1_34#_vetur. If doesnt work, you might want to try VuePeek (https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek).

>Also, I wanted to ask. Were there any downsides to using Vue over React?

Frankly, I can't name any downsides when it comes to Vue, though it would be great to have Fragments from React in it.

First, congrats on graduating.

Second, I think you may want to take a look at https://nuxtjs.org/ - it supports SPA and SSR modes. There are community templates, with many using axios for requests. You can actually integrate it with Express so you can achieve what you mentioned (web app where new users can log in, and view content that other users have posted). The nuxt-express template separates the client and server/api into folders so it's easy to follow. You can then host the app itself on a VPS or a service like Heroku :)

Some of the showcases are Vue.js apps: https://www.nativescript.org/showcases

But there are a fair number of Vue.js code samples as well to look at: https://market.nativescript.org/?tab=samples&framework=vue&category=all_samples

I went through Laracasts Vue 2 material + read through the whole of the VueJS guide (it's super readable)

https://laracasts.com/series/learn-vue-2-step-by-step

Sort of depends how "deep dive" you are talking, I am not writing a SPA so don't need advanced routing or state management. But the above was enough for me to get productive quickly and integrate Vue in my project.

Use arrow functions:

xhr.addEventListener("readystatechange", () => {

Instead of:

xhr.addEventListener("readystatechange", function() {

​

When you are assigning this.store to var stoke, "this" is not pointing to the context where $store is located.

https://dev.to/wangonya/this-and-arrow-functions-a67

You’re not doing anything wrong and neither is vue-cli. GitHub pages is a badly designed product and possibly purposely crippled in that it isn’t capable of properly serving files that are in other directories like you can with a normal web server.

I spent three days on this and realised what was wrong so wrote it off. I suggest https://www.netlify.com instead. I had it setup in less than five minutes and it’s free. Every time you push to your GitHub repo it will pull it deploy it. Have fun!

There's a bunch of demos actually, both the API and examples.

The one closest to what you describe would be the "Typical Component" demo:

• https://codesandbox.io/s/github/davestewart/vuex-pathify-demos/tree/master/main?initialpath=code/typical

There are 3 demos in that section; the Pathify approach, and two vanilla Vuex approaches (which have a LOT more code).

Let me know if that's what you're talking about, otherwise, perhaps the demo availability should be made clearer?

They use Discourse, which uses Ember for the frontend and Ruby on Rails for the backend.

There's not really a good, easy way to integrate Discourse into an app (speaking from experience) - most people just have it on a separate subdomain like the Vue.js team has done.

Then what are you doing in a Vue-related subreddit?

The first js library I started learning was Angular, I loved the custom directives it added, that's why I like vue, I find it pretty convenient to use directives such as f-for, \@event , v-bind:element, etc... I tried learning react but HATED the way it did stuff, CSS variables, are you joking me?

There's no proper separation in JSX of markup and logic, in .Vue files the logic, style and markup each one have their own self-containing tag. In react I have to write more code to get something done compared to vue, take for example the todo list(3rd example in reactjs.org website), writing " this.props.items.map(etc...) " and then write html inside it doesn't look right to me.

I just got D3 to play nice with Vue.js, by reading a lot over the weekend and trying a lot of things out! I love that I don't have to create dom elements with D3 and just have my graph already laid out and just populated the shapes with D3.

Here is a demo

Cheers, I'll definitely check those resources out. In case you ever wanted to leave Netlify or just want free SSL certificates for HTTPS, I recently found Let's Encrypt which is backed by sponsors like Mozilla, Akami, Chrome, Shopify and Facebook (plus a whole bunch more!) who give out free SSL's.

Might be worth looking into for your needs.

I've been happy with the one included with Element. http://element.eleme.io/2.0/#/en-US/component/date-picker

Not sure if its able to be installed as an individual component outside of the framework though.

I've found that https://github.com/jackmellis/vuenit is extremely useful when trying to mock dependencies in a vue component.

But to your question... if you use the element libraries $notify you'll need to mock that http://element.eleme.io/#/en-US/component/notification

You might need to mock the vue-router if doing some page redirection ($router)

I love Vue but...

Your comparing a project with 120 contributors to one with almost 2k. The amount of and quality of third part packages alone is going to be a deciding factor at that point. Most major native mobile app packages like realm have direct support for react native.

>We tried react native years ago and it was a painful experience. Recently we played around with nativescript using vue

Well that is a ridiculous comparison. Two years is forever in "javascript mobile app solution" terms. Nativescript barely even existed then.

>I mean after vue 3.0 I suspect whatever gap that exists will greatly diminish.

Not really because the gap is not really a framework specific thing. Its a community thing. Vue just needs more time to catch up in that area.

It's hard to summarize Nuxtjs features in one paragraph. But its main feature is server-side rendering (SSR) which renders on the server. That solves the SEO issues with modern Javascript client side apps.

Ahh. I appreciate your reply. I haven't used Nuxt and haven't thought of it as a candidate for static site generation. I was able to read more about it's "pre-rendering" option here:

https://nuxtjs.org/guide#static-generated-pre-rendering-

You should look in to nuxt https://nuxtjs.org

There's an axios module, it uses vuex and ssr. There are also a lot of great examples on doing some of the things you're asking.

Also, Vue has an official style guide https://vuejs.org/v2/style-guide/

Laracasts also has videos on Vue, it's worth the membership

Here is the article, I believe I read. if any one wants to read it:

https://www.nativescript.org/blog/would-airbnb-have-fared-better-with-nativescript-instead-of-react-native

Yeah now it’s even better, they even have an app that’s really solid (from my limited use) that you download scan a qr code and can see the changes live on that device.

I made a New Years countdown timer with moment and Vue. You can check out the codepen here. Like u/earthboundkid said, a computed property isn't really a great choice for this because there's nothing to trigger a recompute of the value as the moment object isn't reactive.

I just set up an interval on mount of the component that runs every 250ms (though this could probably be a little longer). It uses moment's diff function to determine the time remaining until the deadline, uses that to create a new moment object, and then formats it with a custom format string. It's also important to clear the interval when the component is destroyed, so it doesn't keep running once it's not needed.

Did you see SPAs and the Backend on laracasts? In the video he uses Axios to fetch data as JSON from Laravel. You can also use Axios to make post requests to create or update data. You would use the routes/api.php route file which runs everything through the API middleware.

So I think you're mixing up some terminology. I'm guessing you mean a root level variable and not a global variable.

I don't think that's what you really are after. I'm on mobile, so I'm limited in my response. You can definitely take a look at some of Vue authentication libraries and implement those. Or you can take a look at this tutorial

It seems weird at first to not use variables that are in every component, but it'll make sense. If you definitely do need variables like that, chances are you need to get into using Veux. Also while it's tedious, I would recommend reading through all the Vue docs before you get going. If you're coming from angular, you'll find lots of things are different in Vue. It'll help you get a better understanding and worst case, when you come across an issue you will remember reading something about it and know where to go.

If you're still having issues after the tutorial, let me know and when I'm in front of a computer I'll help out.

I totally understand you. Testing Vue.js components is still a nightmare. Are you using the official vue-test-utils?

If you can choose, you might switch to cypress, which is slightly less painful.

There are a lot of different ways and methodologies that you can test a system. You can either do End to End Testing (E2E) which will test the whole flow at once, or you can unit/integration test smaller chunks. Unit/integration tests are cheaper and faster to make, with E2E tests being the most expensive, but can sometimes cover the most at once.

I have an SPA that I work on and we do a mixture of all of that testing. The key business logic areas are unit tested and integration tested based on mock data. Gives us solid insights on ensuring we are always processing based on certain rules through the full cycle. On the frontend, I use a tool called Cypress. There are some basic flows that I use E2E testing just for confidence that it all is working at its core in a uniform manner - usually simple CRUD flows or just navigation flows and ensuring data is loading correctly. Everything else I stub with Cypress and I remove the server variable from the testing mix.

I will tell Cypress to load up a key section of the SPA, let's say we are managing users in the system. I will tell it to add a user (and return a response that would be typical from the sever) and ensure the table loads the new data and sorts it properly. Then I will write a test to delete the user (using the same server response) and ensuring the table updates properly, or returns the right error messages if issues happen. During all of those test cases, I will usually add another test that sets a timeout for up to 5 seconds on the server response to ensure loading icons and progress bars are working.

I don't think it's as simple as "Vue bad, need ssr". Though SSR would solve the problem for sure.

Here is your site in google's pagespeed test. You can see in the preview that it doesn't render: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbrachamul.github.io%2F&tab=desktop

Here is a site that I know is built with Vue (the use the cli and webpack template) and you can see that the site does render:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fprahs.com%2F

If you curl their home page, you'll see that it's pretty much empty - standard vue spa setup. I would say try to build your site with the webpack cli template and see if you have better luck.

Quasar was linked incorrectly. It is a framework for launching Vue to every platform. Unfortunately it uses Cordova or Capacitor for mobile deployment, which is not what you want.

EDIT: Quasar Documentation

you have to tell webpack that you are actually building a library, otherwise it will include the webpack runtime and try to 'start' your app instead of simply exporting a module.

https://webpack.js.org/guides/author-libraries/

https://webpack.js.org/configuration/output/#output-librarytarget

Couple of things:

• Instead of redirecting to login with * at the top of the file, set it at the bottom. If i'm not mistaken, Vue-Router checks the order of the pages, so every time you try to enter a page it will redirect to `/login`. Also, instead of redirecting to login with *, redirect to main, and verify if there's a user:

​

routes: [ { path: "/", name: "Main", beforeEnter: requireAuth /* This is how I use it / ... }, { path: "/login", ... }, { path: "", redirect: "/" }

/* This is an example, has worked really well for several projects */ function requireAuth(to, from, next) { firebase.auth().onAuthStateChanged(function(user) { if (!user) { next({ path: "/login" }); } else { next() } }

• Also, Firebase gives you options to control the session, given in the Auth State Persistence docs

Hope it helps!

>2. Does the static hosting have some support for 404s that would open index (pushstate history)?

The Firebase docs are very useful and I suggest you take a look at them. This section specifically might interest you: https://firebase.google.com/docs/hosting/url-redirects-rewrites

You can use either the tools firebase provide or vue-router to solve that issue.

Hello, I'm the creator of vee-validate. I suggest that you take a look at ValidationProvider component introduced in 2.1 which addresses a lot of issues where the directive falls short.

The idea that you create a new component called VTextFieldWithValidation, feel free to shorten that name. Which is ValidationProvider wrapping the VTextField. This allows you to drop one-liner for each field and they would work seamlessly. For example, you could pass a name prop to both the provider and the VTextField.

I have an example for Vuetify over here. Take note that I illustrate both a refactored form and non-refactored form versions to showcase the difference.

With a v-for and component :is binding you could get a simple form generator working. I suggest using validation components from now on as the directive is becoming very limited.

Tell me if you find this helpful or if it's not really what you need : https://codesandbox.io/s/2v5jyr8orr

(I chose to store each creation function in the corresponding component, but you could as well extract it in a JS file or whatever. You can't put them in ModalRenderer because it's a state-less component (unless you switch to a stateful component)

Server environment: ```js const renderer = vueSsr.createRenderer();

return renderer.renderToString(app) .then(html => html) .catch(error => error); ```

In browser https://codesandbox.io/s/5vjkr5kl3n ```js function compileComponent(template, data){ return new Promise((resolve,reject) => { new Vue({ data() { return data }, template: template, mounted() { resolve(this.$el.outerHTML) }

}).$mount() }) } ```

Might not be the best solution but a starting point at least.

My recommendation would be to do this on the server if possible, but if you need it in the browser that is also possible

I was intrigued by this question and built a quick example in a codesandbox:

https://5x696p27rx.codesandbox.io/

Code: https://codesandbox.io/s/5x696p27rx

Basically,

• I create a promise in the action and
• commit the Promises resolve callback into a vuex module's state (along with the text for the dialog etc.)
• the dialog shows up when the vuex state is "active".
• clicking either "Confirm" or "Cancel" in the dialog resolves the promise with a valuf of "true" or "false", respectively.
• in the original component, I can simply wait for the action to resolve and prceed depending on the result returned by the promise.

> Node/Express

is not static its a API server, needs VPS to run.

https://www.heroku.com/pricing

https://www.vultr.com/pricing

• vultr has nice memory for $5 per month, memory is needed to run apps that are not static aka api's

  • you can host as many domains, websites, databases, apis as you want on VPS, there is no limit other than the plan your on

> Vuejs

as for vue host it on VPS.

> what is VPS

its a server you own and can do anything you want to it.

Imho there are scenarios where you just need to communicate via events, e.g. to provide loose coupling. What you can do is use one empty (imported) Vue instance and use its $on and $emit method. There is an example of it somewhere in the docs I think. Don't forget to use $off too in the destroyed listener of your component, or you'll have a memory leak.

Edit: Here is the example I was talking about: http://vuejs.org/guide/components.html#Non-Parent-Child-Communication

Yeah I wasn't clear enough, sorry. So, I was thinking about fullcalendar.io. It's an amazing api to integrate a fully functional calendar. If you could implement something like this, it would be amazing!

Building user authentication yourself is time-consuming and hard to get right. I use Firebase Authentication for my web apps. It lets users log in with their accounts on Google, Twitter, Facebook, etc. If you only want simple email+password authentication it can do that too.

If Firebase Authentication isn't your cup of tea, there are lots of other similar services. I haven't used any of the others but I assume they are also good and easy to use.

Best of luck with your project!

Whipped up a component that can do this kind of highlighting with a content-editable div

https://codesandbox.io/s/goofy-shape-pg1nu?file=/src/components/TwitterInput.vue

Also I don't know why but there was a quirk with the cursor resetting to the start of the input field after the innerHTML is edited so as a quick and dirty solution I copy pasted in a function from stackoverflow that puts the cursor back at the end.

Anyways, regarding your trouble with resizing I'm not exactly sure what the issue would be. I'd just stick it in a flexbox container or constrain it some other way inside a parent component

Ha, fair enough!

I hear you. Where I work we lean heavily on fp-ts, however whenever it intersects with React - something we're not able or willing to write functional bindings for - it's not very ergonomic. I imagine that's even tougher in Vue which if memory serves is a bit more opinionated.

A small helper TaskEither<E, A> -> Promise<A> should be easy to write, though you still lose error information at these boundaries. Just to remove that unwrapping repetition.

You're right to observe that bugs can still happen. In React I'd probably use one error boundary at the top of the tree as an absolute last resort. Perhaps Vue has something similar?

The tax for using another sum type isn't too high, the verbosity is there regardless due to the lack of typeclasses. You're mostly just changing out the namespace/prefix on each line.

Could you link me to how ya'll define props? Not spent any time with React.

I found https://reactjs.org/docs/components-and-props.html , do you just have to add the type declaration to the props argument?

I've forked someones code example with vue and vuex in a codepen and add your some of your functions to it. I think you are doing something weird with `action` in combination with `mutations`. If you do it direct in the mutation it works.

It is a dumbed down version, because I don't know how you `mapMutations` in a single file on code pen. I usually work in Nuxt.js where a lot of this will be configured for you.

https://codepen.io/mvaneijgen/pen/pxXKJP?editors=1010

Hope it helps,

> https://codepen.io/nzshumate/pen/ZqbWKx

I had come across it, but was not sure if that would get me what I wanted. Thanks for the tip I will dive into it !

Edit: Thanks for the codepen! Thats very helpful!

This looks like a problem that would be much better solved using css instead of javascript. I put together a codepen sample that I think gives you the layout you are looking for without any javascript code.

Hi, is there a way, by any chance, that you could manage your translations using phrase or some tool like this ? (Yup it doesn’t answer you primary question but I hope this could lead you to an easier way to deal with them 🙂)

Personally I really prefer this approach as it results in less styles to maintain vs writing theme classes. It also makes implementing user-provided themes incredibly easy. Support is good enough (imo) for toy/showoff projects.

I used the method described here: https://firebase.google.com/docs/auth/web/anonymous-auth

This will create a user and give you their ID, without the user logging in with Google, Facebook, or similar. If the user does log in later, you can link their anonymous and non-anonymous accounts.

I created a codepen for this, something like this will work.
https://codesandbox.io/s/damp-cherry-efjn6?file=/src/App.vue

But if you want your users to be happy, you should probably try to find a better way to search for things. This search is very strict, but I'm absolutely certain that you can find some good algo's for that.

Here's a codesandbox in nuxt that does what you need. You will want to scope the css of the open state to a mobile media query:

.news-wrapper--menu-open .news-menu {
// media mobile: position absolute width full height full etc
}

https://codesandbox.io/s/nested-route-menu-pattern-o74ws

In template :

<div @click.native="getCoordinates($event)"> </div>

2 things to note : .native and $event. .native allows you to work with a native dom event, not vuejs abstraction of it. $event allows you to pass explicitly the event. I'm not sure it is needed, I think that if you do nothing (@click.native="getCoordinates"), vue will still pass the event as the first parameter, but I like to be explicit in those cases.

In js :

... methods: { getCoordinates(event) { // Here you can use e.clientX etc. } }

What fzy_ wrote was indeed ES6 destructuring :

let myObject = { foo: 'bar', baz: 'something', notNeeded: 'whatever', };

{ foo, baz } = myObject;

// foo and baz are now variables in this scope (like initiated with let if I remember correctly) console.log(foo) // logs 'bar' console.log(baz) // logs 'something' console.log(notNeeded) // logs undefined

// You can use this with arrays, even in depth (object in object), skip some values, or group those in a catch all variable. You can also use those in function definitions // With the same object let myFunction = function({ foo }) { console.log(foo); };

myFunction(myObject); // logs 'bar'

I strongly encourage you to learn this in depth, it tends to remove a lot of extracting code, and once you get used to it, feels very natural.

I also encourage you to read about ES6 arrow functions, as the scoping and the terseness makes those very usefull. However you can't use those as methods/computed properties/lifecycle hooks in Vue, as this can't be rebound. But in side those, it's what make it so powerfull.

Here is a codepen comparing full ES6 use vs basic js, where you can filter a list of results based on an input.

I would say to take a step back and simplify your components even if you just create two just for debugging. Get it working then slowly start adding back in functionality until you get back to the full feature set of your two components.

One thing I noticed is in Component A you don't have showEdit defined in your data. That's one potential choke point that could be causing a hiccup in communication between A and B.

Apart from that nothing immediate is standing out and it's going to be hard to pinpoint without running code. That said, here's a minimum component setup with the desired result you're looking for structured similar to your setup. I would compare it to what you have and see what differs.

https://codesandbox.io/s/great-currying-tgb3v?file=/src/App.vue

We got some misunderstanding here, buddy. I was referring to the initial question.

>so basically as a newbie i have to now learn typescript?

My answer to that was: No, you can and should start off just with vanilla JS to learn the fundamentals.

If you really need resources on learning TS, I always recommend the official docs and "getting started" sections for every language or library.

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

No real reason you 'must not' use jquery. It kinda depends on what you want to do with the code though, what you need to drag, what you want to track etc.

Here's a quick hack of the basics wrapped in Vue, so the component knows about the dots that have been added and the top & left positions shown in the output... https://codepen.io/anon/pen/zPOMyW?editors=0011

Next step would be to split the dots into standalone components, have them handle their own dragging and send events to the 'container' component etc.

I'd be interested to hear why you chose the directive based approach. Not trying to disparage your work, as there may be something I'm missing, but this could be accomplished with a single component and some props without the directive:

<template> <p class="readmore"> {{ toggled ? text : truncatedText }} <a href="javascript:void(0)" @click="toggle"> {{ toggled ? lessText : moreText }} </a> </p> </template>

<script> export default { name: 'Readmore', props: { text: { type: String, required: true }, limit: { type: Number, default: 25 }, moreText: { type: String, default: 'Show more' }, lessText: { type: String, default: 'Show less' }, }, data() { return { toggled: false }; }, computed: { truncatedText() { if (this.text.length < this.limit) { return this.text; } for (let i = this.limit; i > 0; i--) { const currChar = this.text.charAt(i); const prevChar = this.text.chartAt(i - 1); const prevCharNotPunc = [',', ';', '.'].some(c => c !== prevChar); if (currChar === ' ' && prevCharNotPunc) { return ${this.text.substring(0, i)}...; } } } }, methods: { toggle() { this.toggled = !this.toggled; }, }, }; </script>

Then to use it you would just do this:

<readmore :text="message" more-text="Read More" less-text="Read Less" />

Here's the codepen that I worked it out in

I personally would recommend headless CMS so you don't have such a headache with content types beyond text (I'm thinking along the lines of if you want to include pictures in your blog). For work, I use Prismic, but I'm sure any headless CMS with Vue integration would do.

I think you misunderstand how the whole thing works, so let me explain a bit:

What is a production-ready Vue app? Basically, it's just a bunch of javascript files and media, coupled with an html file to load them.

Now, if you want to deploy this app with docker, something needs to serve all those files or, as you put it, some local files won't load, because docker on its own simply does not know where to get them. So we have to make those files available.

How can we do that? We can take an nginx container, copy the files into it and let nginx serve them. We can do the same with apache container or we can let node serve the vue app with the built-in serve and instruct an external nginx on when to use that app (basically, we turn nginx into a proxy).

I'll let the blog post on docker.com explain the process of setting it all up with an example.

1. It's strange :-( The default language is English when checking it on the client side: https://www.screencast.com/t/tLuHzPFT We will double-check.
2. Yes, thanks, we'll do it in the next release.

Hi. I read a few articles that made it seem that, thanks to browser improvements, it's no longer needed in 2021 (a bit like how jQuery was so useful 10 years ago, but not so much now). For example https://ably.com/topic/socketio

>We're looking to build a brand new cms and think a vue spa would be exciting but we're a little scared to make that leap.

Why would you ceate your own CMS? There is a lot of existing solutions.

My team is using https://directus.io/

Directus uses Vue for it's frontend editor.

If you are worried about a data grid, ag-grid has vue bindings so far it can handle anything I throw at it.

First, this certainly doesn't have anything to do with Laravel, and isn't a bug with VueJS.

Following their docs, they are using a string in the format YYYY-MM-DD. There might be a bug with that component, because when you look at their example using default-value, the calendar opens up with the correct year and month, but no date is highlighted.

Is that what you see happening with yours?

To debug, try adding <pre>ends_at: {{ ends_at }}</pre> to your template, as well as a line for your default date).

Also, Don't mix {{ }} syntax with bound props.

Going to be traveling the next couple of days but would recommend a site called browserstack https://www.browserstack.com

You can use a 10 minute email to sign up and get 30 minutes free. If you need more time, create another 10 minute email and repeat. Some of the 10 minute email domains are banned, so you might need to use some google foo.

This is something I've been looking to use for an upcoming project of mine.

https://vuido.mimec.org/

https://github.com/mimecorg/vuido

edit: Nevermind I realized you still wish it to operate as a webapp. Will keep up for anyone else looking for such a solution however.

https://www.sanity.io/create

I‘ve used Sanity + Next.js for a couple of months now, really happy with the result! Sanity is a headless CMS, which makes it simple to add new structures and only think about the model and not the UI.

Sanity also push for good developer experience

Take a look at django-webpack-loader. It's not perfect, but makes it reasonable to embed webpack-generated assets in django templates. It's pretty much necessary if you want to use webpack's hotloading feature in development. In production, you won't need a separate server for vue, since webpack will compile your components into static js and css files. For a modern single-page app, some kind of bundling tool like webpack or parcel is highly recommended, since they do things like bundle dependencies downloaded via npm, minify/compress code, and eliminate dead code so your app loads quickly on slow connections.

You could push a .env file to the container. .env vars can be used at runtime if a corresponding key already exists in the runtime config object in nuxt.config.js.

https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config#expandinterpolation-support

You don't need to use the file system router.
See here: https://nuxtjs.org/docs/2.x/features/file-system-routing/#extending-the-router

So you can route anything just like in a non nuxt app.

Like BehindTheMath said, anything you store client-side can't be technically secure. In your situation I would look into nuxtjs, a more beefy vuejs framework that comes with some neat features like server-side rendering. See: https://nuxtjs.org/api/

Before a page loads, an `asyncData` function is called (this gets executed serverside, any functionality here is not on client's side) where you can have access to the server's environment variables and you can make graphQL calls securely with an api key or secret and pass response data to the client-side to be rendered in a table or whereever to be used.

Hope this helps

A nuxt.js application can have a node server bundled into it - express, hapi, etc. You can include the "config" module into your Node API (express in this case) and have the Nuxt app make calls to the Express API via a standard client-sided XHR or Nuxt.js's "asyncData" method (this is essentially a prefetch method defined on the page component that is loaded up on page load). You'd get to use Vue + all of it's reusable component functionality, all of webpack's build tools (polyfills, minification, etc), and consolidate it all into a single project and process if you took the Nuxt route. You'd just need to proxy your calls to the Express API to hide your API key(s).

Read up on "asyncData" - https://nuxtjs.org/guide/async-data/

If your content is asynchronous such as pulling from an api. It is difficult for search engine crawlers to see it because they don't know when your async calls are done. So on sites that need to perform well in search engines; such as a news site or an ecommerce store, it is common to hydrate the page with data on the server before sending it. Its usually done with a node server.

Basically your components execute on the server get sent as a finished page then the SPA takes over on the front end.

Its somewhat complicated but there are projects out there to help such as Nuxt.js. Also if your content doesn't change very often you can try a solution called pre-rendering which basically builds static versions of your dynamic content. It is a lot less complicated to integrate into a project.

Following up on this, Nuxt website has a great example for Using nginx as a reverse proxy

The only thing I had to change was to remove expires $expires; as my version of nginx didn't support that directive.

• Static site generation
• file-based route structure (Single-file components in a "route1" folder become child routes of "route1" in the final output, automatically. The children can be templated in route1.vue with the nuxt-child component)
• easy, plug-and-play implementation of either npm-pulled modules (such as markdownit or axios) or custom-written modules
• same for plugins, that is, app-enhancement scripts that run in certain, user-specified situations

I could go on but the Nuxt docs have all the info you need. In short, Nuxt is the Vue equivalent of React's Next.js.

In my experience, nuxt.js with something like vue-bootstrap was the way to go for spooling up an admin.

All these templates are usually too specific to what they boilerplate.

Might have something to do with the action being async and the fetch method is not waiting on it to respond before rendering the page for the first time.

https://vuex.vuejs.org/en/actions.html ( have a look at the async part ) https://nuxtjs.org/api/pages-fetch ( have a look at the async part also )

Didn't have the time to test the code here, so it's a shot in the dark.

in plugins directory add file buefy.js and paste:

import Vue from 'vue' import Buefy from 'buefy' import 'buefy/lib/buefy.css'

Vue.use(Buefy)

and then, in nuxt.config.js add:

plugins: ['~plugins/buefy'],

see: https://nuxtjs.org/guide/plugins/#vue-plugins

yes but I am using tailwind CSS which uses classes instead - so the class `-translate-x-40` means `--tw-translate-x: -10rem;`

&#x200B;

Here is a link: https://tailwindcss.com/docs/translate