+1.862.296.3618 info@ninjawebsitedesign.com

Nuxt.js, Vue.js SSR and SEO = Awesome!

Nuxt.js is an Impressive Suite of Tools


 

Working with Nuxt.js was like a dream. I loved installing Nuxt.js to be greeted by an amazing floating app logo loading screen on entry. It was even more amazing that routes are automatically rendered on page creation. This shortens the loading time considerably. The page structure is designed to work like an HTML page file system on a cPanel or Plesk server so it makes sense doing SEO in Vue.js. This makes it easy to understand how to implement SEO in Vue.js because the file structure allows me to easily see where Google will crawl the links before they crawl it. Otherwise, it will be very difficult to work with.

 

To Quick Start a Nuxt.js Project for Beginners use this Template

 

Code:

vue init nuxt/starter <project-name>

in Node.js in the folder where you want your project installed. The “<project-name>” is meant to be replace with a NEW project name and, if installed as this line above, will generate an error.

Simply remove the entire line “<project-name>” and replace it with your own project name to have the template load and install a fully pre-built starter template for Nuxt.js beginners.

The File Structure of Nuxt.js

Description

The Nuxt.js file structure allows for automatic creation of certain app requirements. The route for the pages are automatically generated every time a new page is created in the “pages” folder.

You might be asking, but how can that make sense if I want to create a dynamic route or change the path used?

Read on!

Continued …

Nuxt.js is a little confusing at first but once you learn the file structure it makes perfect sense why it’s done this way and becomes easy to understand. Actually, it eventually becomes MUCH easier than traditional Vue.js for routing!

In fact, the Nuxt.js router folder is managed by the Nuxt.js application. Dynamic routes are assigned using the _ underscore before a line of text in either a folder or a filename.

To create a custom dynamic post page, you’d need to define a post page using this type of syntax …

 

Vue.js

Custom defined by yourself using Vue Router as follows:

{ path: ‘/Post/:slug’, name: ‘Post’, component: someComponent },

 

Nuxt.js

This exact route is achieved by creating folders and files and assigning the _ character directly before the line of text in front.

{ path: ‘/Post/:slug’, name: ‘Post’, component: someComponent },

EXAMPLE:

In the Pages Directory you need to create a Folder of “Post” and a .vue file of _id.vue in order for the Nuxt.js file structure to create the above route.

It would look like this:

 

Nuxt.js Dynamic Routes

Notice the “Post” folder in the navigation bar and, inside the Post folder, is the _slug.vue. Here is the syntax for creating a /Post/:slug route in Nuxt.js

Continued …

Nuxt.js creates these routes automatically and, after fiddling with them for a while, becomes natural to development. In a few short days this file structure made perfect sense with my knowledge of SEO and best practices.

Nuxt.js uses a Vue.js plugin called Vue Meta for optimizing Titles, Descriptions and adding header scripts and code. It works perfectly inside the app by modifying code in the nuxt.config.js file.

Vue Meta in Nuxt.js

Nuxt.js
Vue Meta can be used inside separate components to define routes for components. The genius behind the Nuxt.js file structure is how the way Nuxt.js creates routes works like a cPanel or Plesk server using HTML pages.

This allows the Vue Meta plugin to define HTML header tags in each Vue file located ONLY IN THE PAGES FOLDER. That way, you know pages are located ONLY in the Pages folder.

So, ANYTHING OUTSIDE of the pages folder IS NOT A PAGE. This makes it great when creating pages because then when using Vue Meta to define HTML meta tags for pages is easy because you know exactly where the are located and the file structure is exactly like a cPanel or Plesk server.

Once the file system is learned SSR makes perfect sense and is very cool to use.

This is by far the best Vue.js tool I’ve used and will be building all of my website development jobs in it. Very cool and amazing JavaScript framework. Love it!

Nuxt.js Tutorial with SSR


JavaScript is Basic, Learn More than Just JS

One Programming Language Isn’t Enough


 

JavaScript is essential in today’s developer climate. In fact, working with code requires JavaScript in almost every setting. It’s nearly impossible to not run into a need for either Java or JavaScript at some point in an application’s lifecycle. An update will surely require JavaScript to be used somewhere because almost everything on the Internet makes use of it.

Because JavaScript is so basic, it’s generally taught as one of the first programming languages to learn. It’s extremely important to learn HTML, CSS, and JavaScript for web development. Without these fundamental skills, web development is impossible.

But, what other programming languages are there besides JavaScript? Well, thousands are available and range in difficulty. All programming languages are useful (some more than others). But, it’s really up to the skill of the developer himself whether or not a programming language is useful or not.

 

Some popular languages besides JavaScript:

  1. Python – Easy to learn, well-rounded
  2. SQL – Database language for programming the storage and retrieval of information. Used in WordPress and many applications to create dynamic websites and applications.
  3. C++ – Language widely used by local applications stored on a hard disk drive. Popular among video game developers like Xbox, PlayStation and Nintendo.
  4. PHP – Another very popular scripting language designed to work with servers. PHP is a great programming language to learn for WordPress because WordPress is actually a PHP application. Knowing PHP means you know WordPress.

Why Learn More Programming?

JavaScript is Basic
Description

Building applications requires you always know enough to complete the job. It’s not always effective to use JavaScript for a project. Just because you can doesn’t mean you should.

It’s important to have a wide variety of skills so, when necessary, you can decide what to use and when instead of being forced to use one because you don’t know others.

Also, recruiters and companies love options and hate sacrificing portions of job descriptions when hiring for a role.

Continued …

In freelancing, learning JavaScript is essentially required. Developing applications will surely come across JavaScript. So, learning it is required, anyway. For a second programming language I’d recommend PHP or SQL. I would say learn both. These two programming languages are great for building applications and linking them to external databases. Knowing JavaScript, SQL, and PHP can be a great asset.

In fact, building themes in WordPress use PHP, SQL, and JavaScript. Knowing these tools is a great way to become a WordPress theme developer and create then sell your own custom themes in the WordPress theme shop.

Building themes is not essential but can be very rewarding. Consider how many themes WordPress has to offer and you may think it’s a great place to start. But, I enjoy creating my own themes from scratch using the WordPress REST API which offers me many more options with regards to how I can build a website in WordPress.

Having more options is key when applying to jobs because the more you CAN do for your employer, the MORE LIKELY you’ll get the job. Everybody wants options and nobody likes to be stuck behind limited capabilities.

 

I Recommend the Following


How a Processor (CPU) Powers the Apps You Use Everyday

CPUs are Used Everywhere


 

The internet of things, IoT, is currently being developed as we speak. Ever hear of an internet connected toaster or oven? These devices receive updates and are built to work with home management AI and services that simplify your home life.

For example, an AI would listen to your voice to know when you want something toasted and how long at what temperature. But, how does that work?

AI is powered by CPUs in data centers in Cloud Storage facilities like Amazon Web Services, Google Cloud, and Microsoft Azure. These storage facilities are where servers are setup with the necessary specifications to meet consumer needs.

For a look at enterprise-level tech see this link:

https://aws.com/

API, AI + Machine Code

Description

Devices like these are built on the device end first. This team in charge of this project must know what they are going to build, what it’s going to connect to, and how. This knowledge is used to determine the tech used inside this machine in order to properly, and securely, form an internet connection to the home network.

That home network connects to cloud data centers worldwide in order to access the AI.

Continued …

From here, the AI is used to manage and control all of the devices in the Smart Home. Anything connected to their account is managed by a centralized AI. This AI is used to turn on and off lights, set timers, and turn on and off toasters. AI are essential in making toasters operate effectively in a Smart Home.

Machine language code is what is used to build the hardware programming that gets the toaster to work at the physical side. In order for the toaster to work on the internet side, it would need an AI, and that also requires an API in order to work properly.

AI can’t work with everything built simply because there are lots of different devices using different technology. So, API, or Application Programming Interface was developed to address issues with compatibility over a large volume of devices uses different technology.

The point is, technology will take humanity farther than it ever has before. It’s fun for me to learn and use it. I can’t wait until we discover more innovative and unique ways to create awesome ideas and put that to use to further human development over the course of the next generation.

How-to: Ecommerce + WordPress Headless API

Creating Custom Ecommerce Sites With WordPress Headless API


 

WordPress Headless API is a useful tool when building applications. Although WordPress is a website CMS, many people build web apps using the WordPress Headless API to query WordPress websites for data in phone apps. Many big enterprise companies use WordPress as their CMS of choice and the WordPress Headless API is a great tool to access information remotely from your new application.

WordPress Headless API is a wonderful way to build the application you need without having to code SQL because the WordPress Headless API talks to SQL for you. This allows for a much simpler take on building templates in WordPress and also allows JavaScript to more easily build around the WordPress framework without any complications or issues.

WordPress RESTful API + Ecommerce

Hersh Enterprises LLC
Description

WordPress RESTful API is very useful the design of entirely custom built applications that are fine tuned to meet customer needs. These applications can be built to modify default WordPress architecture to tune the project to address customer concerns or issues.

For example, if a customer dislikes Woocommerce but wants to use it in their next project, WordPress Headless API will allow the same products to be listed on the app where features can be added or removed as requested and also built entirely by the developer’s hands.

Continued …

PROS

  1. Custom Applications
  2. Ease of Linking to Other Websites
  3. Custom Theme Development
  4. Ease of Use / Simplicity
  5. Custom Plugins
  6. Custom GUI
  7. Fast Loading
  8. Limit is the Imagination of the Developer + RESTful API

CONS

  1. SEO + SEM
  2. Cost
  3. Development Time

The Point


Ecommerce is a great tool for JavaScript Applications. JavaScript allows SPA, or single page apps, to replace the default multi-page design of WordPress. The tradeoffs are SEO and SEM features of WordPress but the website is a much higher performing and functioning version.

If a developer is skilled enough, they are able to create pre-rendered versions of JavaScript apps in order to properly SEO the applications for Google and many popular tools. So, unless the developer is not trained properly in SEO for web apps, the app should be properly displayed on Google Search.

Google has been getting much closer to properly indexing JavaScript SPA so it’s only a matter of time before applications are rendered at the same level, or rank, as a traditional multi-site variant of website like WordPress.

In fact, anything done in JavaScript can be properly SEO’d because of the numerous plugins devoted to that very goal. It only matters if the developer hired spends time learning the techniques.

So, for most things the WordPress API is suitable for the job. This is especially true for Ecommerce because, using a tool called Nuxt.js and prerendering, an entire server state is automatically created in “real-time” while the application is running, making a dream app where the website is fast performing and fully customized while serving customers Ecommerce services with high search rankings with a WordPress GUI backend.

Negatives would obviously be cost because a site like that is extremely expensive. The obvious other downside is time to build such a great app. It’s definitely possible I could do it but, of course, the time required would cause the project to be very expensive. Of course, if you have the money, the ability to wait, and the developer (like me) know pre-rendering and serving applications via a too like Angular Universal or Nuxt and Vue.js prerendering, than any and all of this is totally possible.

Hersh Enterprises LLC – New Current Site (Nearly Completed!)

Custom Built WordPress Headless API Website


 

This website is a Vue.js site built onto a node.js app. This website uses API, also called Application Programming Interface, to connect with WordPress and communicate with both the server and the database built in SQL installed onto the website CMS platform.

This is a custom theme built in JavaScript. Today, WordPress RESTful APIs are becoming increasingly popular for their speed and ease of use for clients. JavaScript applications such as this allow for a fully customizable experience tuned to exact customer needs.

Project in Development but nearing completion. Some parts of the site are not ready and may not function as expected.

Project Price = $500 

Hersh Enterprises LLC
Description

No longer will there be any limitations because of template design. With JavaScript support, WordPress can be built onto a theme designed in almost anything. In fact, this theme is capable of being transferred far away from the actual WordPress site itself and it WILL STILL WORK because the template is actually built apart from the WordPress application.

Continued …

API allows the website and the app to work in tandem although they are not actually together. This allows the website to be installed virtually anywhere without having to worry about needing to install a WordPress app on a domain to run the site.

In fact, because Vue.js apps can be installed onto almost anything, this site can be installed almost anywhere without having to ever touch the WordPress website at all.

This website is easier to manage than Woocommerce and features a custom built E-Commerce system designed for a budget. It utilizes the WordPress standard block system for managing new products.

The website can be managed fully from the backend utilities without needing any code knowledge. In order to keep the website working anybody can be assigned to help because it is designed so that anybody can use it.

WordPress Has a Phone App!

WordPress Has a Phone App If You Didn’t Notice


  The Phone App allows users to create posts and update content on blogs using their phone. It’s a useful app. Although, it would be more useful if a developer built a proprietary app for their website. But, there are often complications to phone app delivery. Sometimes keeping it simple is best and the WordPress phone app is a great way to keep things simple and still meet client needs.

Update Posts, Create New Posts, Manage Your Sites

WordPress Phone App
Description

The WordPress Phone App allows you to manage multiple websites from one convenient location. You can link as many as necessary to the phone app and login easily to manage and make changes to your website from your phone. There is even a post editor that works just like the PC version on the phone (with blocks too!). It’s available on the Google Play App Store and Apple App Store.

Continued …

With so many people on the go it’s important WordPress has a phone app to go along with their website. Of course, most big companies have one. Shopify and Woocommerce both have apps. But, when I first started developing I didn’t notice it and it became very useful for me as time went on.

I even used it myself to create posts while on the go and they always came out beautiful on my website. I would strongly recommend trying it. It’s a great option for budget-concious clients who are looking for a phone app and website.