Hello,

After I got my installation issues rectified I created a new vuejs project using the vue UI which I fixed in one of my earlier posts. The vue UI was brilliant enough to get my first project created in no matter of time. I was excited about vue UI and its a very beautiful UI to manage your projects.

I was having vue/cli 3.5.3 and node.js v8.15

I installed the Visual Studio Code and opened the project and looked into the folders and files. I compiled the project using the vue UI and I opened the project in a browser and all looked good when I saw the default vue template on the screen with home and about pages. All worked good.

I then wanted to see if it gives me a good production build. So I did a build from the vue UI and build as successful. I saw the dist folder created with the required files in it. I copied the dist folder to one of my wamp apache server’s www folder. I browsed the project from the browser and I found oops, the site doesn’t show anything. I looked into the browser console and saw that none of the CSS and JS files loaded because of the reference problem.

below is my dist folder structure

I opened the index.html file it had a wrong path or it was not a relative path. Like below

<script src=/js/chunk-vendors.e4c467f6.js></script>

If you notice the src path starts with “/” and that was not right. It should start without “/” and should be like below

<script src=js/chunk-vendors.e4c467f6.js></script>

This is where vuejs is spoiling there impression. This was the code and output of their own sample project and it should have worked without any problem.

I then googled for hours and nobody has a clear solution. Most of them talked about settings this and that path and none of them worked. In one of the posts, it talked about setting something in the vue.config.js file. I searched for this file in the src folder and could not find it. As per vuejs documentation, this file is optional. I started hatting this framework.

I thought of adding this file manually and I added it and I inserted the below code in that file

module.exports = {

publicPath: ''

};

Like the below image

I compiled the code again and everything worked. I then did a prod build and it also was successful. I then moved the dist folder to my apache www path and I browsed the project with my fingers crossed and wow to my surprise it worked without any console errors and I could see the default page loaded and all links working.

Let this be helpful to everybody who is facing this issue.

How to solve vue.js prod build assets relative path problem was originally published in Vue.js Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

This becomes very crucial when you are developing an application that has registration and user login features. I was recently developing an application vue.js and I came to this situation to implement route authentication or guard.

Vue Router has few Navigation guards to help us here, that you can use as a hook before every route. Navigation Guard is written as a plain function that can be understood and used easily

Have a look at the below example.

Write a common function to check if the user is authenticated.

function guardMyroute(to, from, next)
{
 var isAuthenticated= false;
 if(localStorage.getItem('LoggedUser))
  isAuthenticated = true;
 else
  isAuthenticated= false;

if(isAuthenticated) {
  next(); // allow to enter route
 } else{
  next('/login'); // go to '/login';
 }
}

The above function checks if a user is authenticated or not. The local storage item with key “LoggedUser” is set when a user uses the login form and logs in successfully to the system.

Who sets the Localstorage item?

This is very important. In most cases, it would be a Login component which calls a web API or by any other means to check if the provided credentials are valid and then sets this localstorage key as an indicator for whether the user is an authenticated one or not. In my example, the Login component sets the below after validating the credentials of a user.

Let us assume the userlogin validation API call returns the below response

So I would set the local storage to something like below

localStorage.setItem('LoggedUser',results.User);

Lets now look at my router.

import Vue from "vue";
import Router from "vue-router";
import Login from "./views/Login.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Login,
      meta: {title: 'Home'}
    },
    {
      path: "/login",
      name: "login",
      component: Login,
      meta: {title: 'Login'}
    },
    {
      path: "/dashboard",
      name: "dashboard",
      meta: {title: 'Dashboard'},
      component: Dashboard,
    }
  ]
});

It's quite simple . its now time to apply our function to the router guard.

Let's hook the above function to the above router definition now. So the code would be like below

import Vue from "vue";
import Router from "vue-router";
import Login from "./views/Login.vue";

Vue.use(Router);

function guardMyroute(to, from, next)
{
 var isAuthenticated= false;
//this is just an example. You will have to find a better or 
// centralised way to handle you localstorage data handling 
if(localStorage.getItem('LoggedUser))
  isAuthenticated = true;
 else
  isAuthenticated= false;

 if(isAuthenticated) 
 {
  next(); // allow to enter route
 } 
 else
 {
  next('/login'); // go to '/login';
 }
}

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      beforeEnter : guardMyroute,
      component: Login,
      meta: {title: 'Home'}
    },
    {
      path: "/login",
      name: "login",
      component: Login,
      meta: {title: 'Login'}
    },
    {
      path: "/dashboard",
      name: "dashboard",
      beforeEnter : guardMyroute,
      meta: {title: 'Dashboard'},
      component: Dashboard,
    }
  ]
});

Have a look at the new router definitions and then you can see an additional guard being defined on each router. These guards are hooked to our function named “guardMyroute”. The guard name is “beforeEnter”.

So what happens is any time this route is triggered it automatically fires the route guard function and thus helps us to authenticate our routes.

Having said that there some guards that vuejs have in its pocket to help us with various needs. Below is some information on them

Route Guards are
beforeEnter: action before entering a specific route (unlike global guards, this has access to this) (this is what we have used in our above example)

The Global Guards are :
beforeEach: action before entering any route (cannot have access to this scope)
beforeResolve: action before the navigation is confirmed, but after in-component guards (same as beforeEach with this scope access)
afterEach: action after the route resolves (you cannot affect the navigation)

The Component Guards would be :
beforeRouteEnter: action before navigation is confirmed, and before component creation (no access to this scope)
beforeRouteUpdate: action after a new route has been called that uses the same component
beforeRouteLeave: action before leaving a route

hope it's simple. Enjoy programming

How to implement route guard in vue.js was originally published in Vue.js Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

In my previous article I demonstrated how to use Vue’s Multi-Page App (MPA) support to embed Vue Single File Components into a Django template, allowing developers to easily commingle usage of Django templates and Vue within an application.

The article implemented a very simple example. Since writing the article, I’ve received several questions regarding information sharing from Django to Vue and among Vue components on a single page.

In this article, I’ll explain how Vuex can be introduced into the Vue MPA and information can be

• shared between multiple components on a single page
• persisted in components across page loads
• passed from Django templates to Vue properties

Introducing Vuex to a Vue/Django Project

I’ll introduce two simple Vue counter components to a single page of a Django application. These components will retrieve and mutate their state from the same Vuex store. Additionally, each counter will display a message provided as a Vue property from a Django template variable.

I’ll continue from where I left in Part 1: a working Django App integrated with a couple of Vue components. If you’re following along with the code, then the starting point in the example repo at is tagged part_1.

Adding Vuex

We start by adding Vuex and the Vuex persistedstate plugin to our project. From the main project directory

cd vue_frontend
yarn add vuex vuex-persistedstate

A Simple Counter Component

Cribbing from Vuex’s tutorial, let’s create src/components/HelloWorld.vue with a simple counter component:

This component has a single property msg which will be shown above the counter readout. The computed count is retrieved from the Vuex store (which we haven't built yet) and displayed surrounded with buttons that, when clicked, call two methods ( increment and decrement) which in turn call state mutators.

Note that it might be more appropriate to utilize Vuex Actions here, but for simplicity I call the mutators directly.

Multiple Components on a Page

Now that we have a new component, we need to include it in our Django template. Just as in Part 1, we’ll create a new entry point and instruct Vue how to mount our DOM elements. The only conceptual difference is that this time we mount multiple components. However, due to a great deal of nuance in how Vue is loaded in a MVA, there are some specific ways we must code our entry point to ensure that properties may be read and that state can be shared across components.

Create a new file index.js with the contents:

Again, with the exception of importing and using Vuex, this conceptually parallels our other entry points. But there are differences in how we import Vue and and in how we mount the components. First, we import Vue from vue/dist/vue.js which will be necessary later when we want to make our Vuex store shared across components. Second, mounting components using the el/ components method instead of render/$mount allows us to capture properties provided directly from static HTML.

Note we’re mounting the same component twice, but we could have mounted a second component instead if we had one available.

With our endpoint designed, we next tell Vue about it. Modify vue.config.js and update the pages configuration to include our new endpoint:

const pages = {
    "index": {
        entry: "./src/index.js",
        chunks: ["chunk-vendors"],
    },
    ...
};

And finally, we update our Django template index.html to include the #hello_world_a and #hello_world_b DOM elements that we specified in our entry point:

{% with msg0="The Left Counter" msg1="The Right Counter" %}
  <div id="hello_world_a" style="width: 49%; display: inline-block">
    <hello-world msg="{{ msg0 }}"></hello-world>
  </div>
  <div id="hello_world_b" style="width: 49%; display: inline-block">
    <hello-world msg="{{ msg1 }}"></hello-world>
  </div>
{% endwith %}

{% render_bundle 'chunk-vendors' %}
{% render_bundle 'index' %}

Both elements are included on the page, and we pass each a msg property that is taken from a Django template variable. The variables are static strings here, but they could easily be context variables or the output of a template tag.

If we tried to run our application now, we’d receive some errors about state not being defined, because we haven't yet built our store.

Building a Vuex Store

Our HelloWorld component depends on a Vuex store, so let’s add that.

Create a new folder vuex inside src. I find it useful to organize my store into modules, so start by creating a file src/vuex/vuex_module_counter.js with the state and mutators our HelloWorld component needs:

export default {
    state: {
        count: 0
    },
    mutations: {
        increment: state => state.count++,
        decrement: state => state.count--
    },
}

Next we need to instantiate a Vuex store. While this is normally quite straightforward, because we want to share state across components on the same page, we need to work around that fact that Vue will create separate store instances for each component in our MVA. Luckily, I noted that GitHub user sumobrian forked my repo and included a very clever way to accomplish this using a technique described first (I believe) in this blog post by Christo Crampton.

Create a new file vuex/vuex_store_as_plugin.js with the contents:

The setup of the store is very similar to those described in Vuex tutorials. However, I’ll note a few differences.

First, we are utilizing the createPersistedState plugin, letting that plugin know that we’d like the count state to be preserved throughout a visitor's session. The plugin will take care of all the details for us. Note if we had a more complex application with many state variables, we can here choose which of those we'd like persisted.

Next, we create a Vuex store, utilizing the counter module we created earlier. We could easily include any number of additional modules here.

Lastly, per Christo’s technique, we export a Vue plugin that does a single thing, which is to override the standard $store object with our common store. This will ensure that all our components on a single page will be utilizing the same store instance.

Now that we’ve built our Vuex-Store-As-Plugin, let’s instruct our entrypoint index.js to use it by adding a couple lines:

Note we do not include any reference to the store in the Vue constructors, because we are instead using our store via a plugin.

That’s it! It’s time to…

Admire Our Work

Run your Django dev server,

./manage.py runserver

fire up the Vue frontend,

cd vue_frontend
yarn serve

and point your browser to the URL reported to you (probably http://localhost:8080).

You will see your two counters peacefully coexisting on a single page, harmoniously sharing state, uniquely described by a variable property.

Increment the counters a few times and reload the page, and the persistedstate plugin will ensure the last state is restored.

Conclusion

By introducing multiple Vue components managed by a common Vuex state to a single Django page, it is easy to intermingle the two frontend technologies, leveraging each wherever it would be most suitable without sacrificing the strengths of either.

Acknowledgements

As noted above, I was first made aware of the Vuex-Store-As-Plugin technique by GitHub user sumobrian in his fork of my repo. The technique he implemented was first described (I believe) by Christo Crampton in his blog article Make your vuex store globally available by registering it as a plugin. Thanks to both!

Source

See django-vue-mpa on github.

Vue + Django — Best of Both Frontends, Part 2 was originally published in Vue.js Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Nowadays, the front-end field becomes more and more complex. So our time is limit and should be used wisely. Therefore, I keep looking for tools or tips to increase my productivity. I had shared an article about how I use keyboard shortcuts into my developing process. In the article, I want to share some useful Chrome extensions for front-end developers.

TL;DR, those are the extensions I’m going to introduce in article.

1. Utime
2. Change Timezone
3. Figure it Out
4. ColorZilla
5. Page Ruler
6. WhatFont
7. Wappalyzer
8. Incognito This
9. JSONView
10. User-Agent Switcher for Chrome
11. Pushbullet
12. Awesome Autocomplete for GitHub
13. Refined GitHub
14. The Great Suspender
15. Google Publisher Toolbar
16. Tag Assistant
17. FB pixel helper
18. React Developer Tools
19. Redux DevTools
20. Vue.js devtools

—

In this article, I will categories those extensions into a few different groups base on the purpose I used them.

I. Timezone & Timestamp

• Utime: Transfer timestamp into a human-readable date string.

• Change Timezone: switch your browser timezone
  If you want to display time in a different timezone. Change Timezone can help you to make sure your application works correctly in a different timezone.

• Figure it Out: display current time for different timezone
  If your team works in a different timezone or you have to constantly travel to a different country. Figure it Out can help you figure out the current time in your target city. This is helpful when you what to contact a person in a different timezone.

II. Design

• ColorZilla: To get the color code from a website element.

• Page Ruler: To check a website element’s position and size.

• WhatFont: To get the website’s font-family setting.

III. Developer

• Wappalyzer: To get the technologies used on the target website.

• JSONView: To format the JSON which response by an API.

• Incognito This: Turn your current active tab into incognito
  Sometimes, use the incognito tab can help us prevent lots of problems and make sure our application work as expected when it have no cache.

IV. Cross Browser & Device

• User-Agent Switcher for Chrome: Switch your user-agent into different browsers or devices.
  If you use user-agent to detect the browser and make different effects. This can help you to have a quick validate the result.

• Pushbullet: Send a link or some message to different devices
  Sometimes, we have to test our application on different devices. This can help us pass the link to the target device.

V. GitHub

• Awesome Autocomplete for GitHub: autocomplete the GitHub search bar.

• Refined GitHub: adds some useful features on the GitHub web application.

VI. Performance

• The Great Suspender
  Suspend the tabs in the background if it hasn’t be used for a specific time. This can help us free up the memory and CPU.

VII. Service & Framework

Other extensions for specific service or framework

• Google Publisher Toolbar: for Google AdSense, Ad Exchange, DFP
• Tag Assistant: for Google Analytics, Google Tag Manager
• FB pixel helper
• React Developer Tools
• Redux DevTools
• Vue.js DevTools

—

Thanks for you’re reading. I hope the information can help you boost up your developing process.

Chrome Extensions For Front-End Developer to Increase Productivity was originally published in Vue.js Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

All my friends and people close to me know that I’m fun of Vue JS and .NET Core, at the same time. Among many existent options for developing Single Page Application (SPA), I have special consideration of Vue JS, even I like so much Angular as well.

By default, the Visual Studio does not have any template specifically for Vue JS + Asp.Net Core, like it has for Angular + Asp.Net Core. Setup from scratch a Vue JS application with all necessary configurations sometimes could take a lot of time: webpack, loads of packages, Middleware configuration for SPA in Asp.Net Core startup.

Because of that, I created to help the technical community my own template of Vue JS application together with Asp.Net Core Web API application in the backend side. The template is available at the following link:

VueJS with .NET Core 2.2 Template

Installation

To use it just download the extension at the given link and follow the step by step after execute file. Details in the following images:

Usage

To use it after the installation , just o Visual Studio 2019, escolher a opção para criar um novo projeto e realizar a busca do template. Ele já estará na lista disponível:

To use it after the installation, just open the Visual Studio 2019, choose the option to create a new project e search the template by name. It’ll be already installed and available on the template list:

Feito isso, é só confirmação a criação do projeto. Esta é a estrutura básica padrão:

After that, just confirm the project creation. It is how the structure looks like:

The project has a standard configuration of Asp.Net Core Web Api (2.2 version) and also a Vue JS project setup on the ClientApp folder, with all the basic and needed configurations.

All the extra needed settings on Asp.Net Core Startup file were already made as well, including the mandatory packages for Vue JS SPA Middleware:

Run the project

After creating the project, the only thing that you need to do is running it.

PS: in case of the Visual Studio opens a URL different from the root (e.g localhost/api/values), just type the root of the application (the main domain without any folder path) to execute the Vue JS application.

Conclusion

I hope that helps you in your daily routine as a software developer, being important stuff to save your time every time you have to create Vue JS + Asp.Net Core application.

In case of any questions, feel free to ask me right here.

Thank you for reading this article till the end. Following are my social media profiles where I frequently share my technical posts and information on IT Events.

Also, I’ve shared the links to Caqui Coders, the Brazilian technical community that I’m one of the organizers.

Twitter: https://twitter.com/alemalavasi
Linkedin: https://www.linkedin.com/in/alexandremalavasi/

T

• Facebook: https://www.facebook.com/caquicoders/
• Meetup : https://www.meetup.com/pt-BR/CaquiCoders/
• Canal no Youtube: https://www.youtube.com/CaquiCoders
• Instagram: https://www.instagram.com/caquicoders/

[English] Template — Vue JS + Asp.Net Core — Visual Studio 2019 was originally published in Vue.js Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Create a new Nest app

Install the Nest CLI

npm install -g @nestjs/cli

Create the NestJS app

nest new nest-with-vue

Install the dependencies

cd nest-with-vue npm install

Verify it’s all working properly

First, run it (this will watch the folder so we won’t have to restart the server as we make changes):

npm run start:dev

Then, hit it (in a separate terminal window):

curl localhost:3000

You should get Hello World!.

Set it up to serve static content

Install the package:

npm install --save @nestjs/serve-static

Use the package

src/app.module.ts:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule} from '@nestjs/serve-static'; // New
import { join } from 'path'; // New

@Module({
  imports: [
    ServeStaticModule.forRoot({ // New
      rootPath: join(__dirname, '..', 'client/dist'), // New
    }), // New
  ],
 controllers: [AppController],
 providers: [AppService],
})
export class AppModule {}

src/main.ts:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.setGlobalPrefix('api'); // New
  await app.listen(3000);
}
bootstrap();

We’re moving all the existing endpoints to under /api, and then serving the static content in the ./client/dist folder (which doesn't exist yet) when someone hits the root (in this case localhost:3000).

Also note that the name client here could be anything. It's just the folder where we're going to put the Vue app.

Verify that the controller endpoint moved

Now, if we hit the previous endpoint:

curl localhost:3000

You should get {"statusCode":500,"message":"Internal server error"}.

But if you hit the new /api endpoint:

curl localhost:3000/api

You get Hello World! again.

Now we just have to create the Vue app in that ./client/dist folder.

Create the VueJS app

Install the Vue CLI:

npm install -g @vue/cli
# OR 
yarn global add @vue/cli

Create the app:

vue create client

Build the app:

cd client
npm run build

This will put all the static files in ./client/dist, right where the Nest app will be looking for them.

Verify that Nest is serving the compiled Vue app

curl localhost:3000

You should get something that looks like:

<!DOCTYPE html><html lang=en> ... <strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> ... </html>

Which is the HTML being served by the Vue app.

Open it up in your browser and you’ll see it’s working!

Closing words

That’s it. You can find the complete code here.

Originally published at https://www.zakmiller.com on November 11, 2019.

How to Serve Vue with Nest was originally published in Vue.js Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.