Best match

Most recent

InfoWorld

Next.js 13.4, the latest version of Vercel’s web development framework, stabilizes the App Router, which builds on React Server Components and React Suspense to bring a number of improvements to ...

Next.js rearchitects router for smoother server-side rendering

Did you know that Nuxt.js can take your web development to the next level? In this article, we’ll explore how using server-side rendering (SSR) with Nuxt.js can improve your website’s ...

Boost Your Business with Nuxt.js and its SSR Capabilities #nuxt #vue #business

LinkedIn

Get the most recent info and news about NuxtJS on HackerNoon, where 10k+ technologists publish stories for 4M+ monthly readers.

NuxtJS

The Context For our podcast there was a need to speed up the YouTube cover creation process. The cover must be interesting, containing the right information and in the right format. In we only have one graphic designer, Francesca. For this reason we always try to overload it with requests, so as to automate the process as much as possible. Schrodinger Hat Why a Netflix Inspired Cover Generator? Well, if you don’t learn from the best who should you learn from? We really like the covers of the various TV series and movies in the Netflix catalog. The inspiration comes from their platform. The style clearly refers to that of Netflix albeit with a few changes and less details. We took as a reference the example of the Netflix title, a testing page dedicated to positioning and footprint. What the Project is Really About The project is a small application that makes a drag-n-drop editor so as to insert images and edit texts and clutter. It’s fully customizable and doesn’t require too many skills to tweak. The codebase is (VueJS framework) and , a JS library for HTML5 canvas interpolation. Nuxt.js KonvaJS The repository is available on our . Github The demo is available on our . demo website How Does it Work? Using Konva.JS we initialize a Canvas containing multiple layers, just like a Photoshop project. Each layer encloses a portion of the rendering: background and photos shade headings and text additional layer for additional photos / texts It is thanks to this structure that it is possible to have a game of effects, such as the gradient in Netflix style. Nuxt handles the KonvaJS API very well and this makes development and implementation of features easy and extremely fast. The Canvas element also offers a very important property such as pixelRatio. This property allows us to export and save our work in high resolution for subsequent modifications or to work with particular formats. In this way the project can solve many problems. Obviously everything could be improved, starting from the colors that could be selectable and customizable directly during the creation of a “project”. We decided to leave it like this, as if it were a PoC, precisely because it could have interesting implications and because it is our favorite theme. How Can I Get it to Work Locally? The project is portable and can be released anywhere. We have chosen Netlify. Locally it will be enough to clone the repository from the link above, install the npm modules and start the dev server via Nuxt. In README.md you will find all the instructions :) Future Implications or Future Implementations? We currently use it internally for the production of our podcast YouTube covers, but we do not hide that it could become something else in the future. We would like to create a kind of tool to speed up UI / UX testing by simply having the various components in Vue / React / * JS so as to try to render them on a canvas (a bit like if we were making a microfrontend) and verify that it is all correct in terms of design. Conclusion The project was a lot of fun to do. KonvaJS is very intuitive and the API Reference was really useful. Downloading the YouTube cover in high resolution from this tool saved us a lot of time for each uploaded video! You can find our YouTube channel . here The podcast is only available in Italian. Previously published here .

We Created a Netflix Inspired Cover Generator as a NuxtJS Project for Our YT Channel

Heroku and CircleCI : Automated CI/CD Process for a NuxtJS

Recently I came across the issue of using the module in Nuxt.js and invoking a $ in subsequent line of code in the same method. The conundrum began when the lines after the method did not execute as intended since the page was redirected to the redirect URI. auth router.push auth.loginWith It has been only a week in the Vue.js land, so I suppose this issue is something faced by many newbies. So, here goes where it all started: I have a function, whose body looks like: authenticate() { .$auth.loginWith( , { : .user }) .$router.push( .localePath({ : }))
} (e) { } try await this 'local' data this // some other line of code that shows loading msgs // ... this this path 'dashboard' catch // handling error Now, notice that once the gets invoked, the execution is handed over to the middleware of nuxt.js. Thus, using a in is redundant. line: 2 auth $router.push line:5 Before we proceed any further, let’s take a look where the auth’s configs are defined: Go to: nuxt.config.js Find the key auth auth: { : { : , : , : , : 
    }, redirect login '/login' logout '/' callback '/login' home Notice, the key. home Bingo! This is exactly where we want to tweak. Before we do any tweaking, let’s make it clear what we are trying to do and : why We want to use all the good things offered by the module, other than the thing. auth redirect The lines after the are necessary to be executed before the view can be updated. In this case it is a loading and success notification that needs to be shown before the user is redirected to the dashboard upon successful login. $auth.loginWith Now, the only thing left to do is disabling the redirect case in option auth will do the job! home: false The object in would look like this now: auth nuxt.config.js auth: { : { : , : , : , : }, redirect login '/login' logout '/' callback '/login' home false Bam! We are done. Previously published at https://medium.com/consol/using-auth-modules-redirect-in-tandem-with-router-push-in-nuxt-js-d6d703e0a85a

Using $auth Module’s Redirect in Tandem With $router.push in Nuxt.js

Install a Cosmic-powered Nuxt.js App on Digital Ocean in 5 minutes

Nuxt.js Website Boilerplate

For the past few hours, I've been working on dockerizing a Nuxt.js server-side rendering app to be deployed to AWS Elastic Container Service (ECS). I hit a stone wall when environment variables are not properly injected on runtime on ECS. In this post, I will walk us through steps to properly dockerize Nuxt.js SSR apps and share some of the lessons I learnt. There are 2 major ways to dockerize Nuxt.js apps, and each of them has its shortcomings: 1. : The Nuxt app is built after Docker image is built, when the container is spawned. The downside of this is the container boot time takes significantly longer as it involves building the artifacts on run. This also violates the principle of a 12-factor app. Nuxt build on run build/release/run 2. : For this, sensitive environment variables are injected during stage. The upside is the boot time is much shorter now, hence, quicker revert time in case you need to revert to an older version. However, the downside is the sensitive variables are now bundled into our Docker image and it requires a rebuild every time a variable is updated. Nuxt build on Docker build docker build For this post, I will be using the first method, "Nuxt build on run". How environment variables works in Nuxt.js apps? Let's revisit how environment variables work in Nuxt apps. Some of us may already be familiar with the property in , which allows us to inject sensitive values from your terminal environment to the app on  runtime. env nuxt.config.js { : { dbUri: process.env.DB_URI  
  }
} // in nuxt.config.js export default env /**
      * dbUri is accessible from both client and server side.
      */ From the snippet above, is read and injected to when we run the app for any purpose. ( , or ) When serving a production build, our environment variables are most likely different from environment to environment. Thus, if we build our app ( ) as part of the building steps of our Docker image, any sensitive environment variables that is injected when we run our Docker image ( ) will not work as the artifact has been built before these variables are injected. DB_URI dbUri nuxt start nuxt build nuxt nuxt build docker run ... How to safely inject environment variables into Dockerized Nuxt.js on runtime? By adopting " ", we adhere to: Nuxt build on run Principle 1: Build and serve on runtime! Principle 2: Never embed any sensitive value in Dockerfile {
  ... : {
    ... : , : , : ...
  }
  ...
} "scripts" "build" "nuxt build --modern=server" "start" "nuxt start" "prod" "yarn build && yarn start" To serve a production build, all we need to do is to run . yarn prod In my : Dockerfile node: . APP_DIR /app/ HOST . FROM 10.16 3 ENV WORKDIR ${APP_DIR} COPY . ./ RUN yarn install ENV 0.0 0.0 # Insensitive environment variable EXPOSE 3000 CMD [ , ] "yarn" "prod" Here we go! Our dockerized Nuxt app is ready. We can run our Docker image using or alternatively with Docker Compose. I personally use Docker Compose a lot. In my case, I created a that inject environment variables from the file in same directory. docker run docker-compose.production.yml .env My : docker-compose.production.yml version: "3" services: web: build: . restart: always env_file: - .env ports: - "3000:3000" Once ready, we run to bring up our containerized Nuxt app. docker-compose -f docker-compose.production.yml up -d How to safely inject environment variable for dockerized Nuxt.js on AWS ECS This section is only applicable if you choose ECS as your deployment platform of choice. In this section, I will walk us through: storing sensitive values using AWS SSM Parameter Store building and pushing image to image registry creating an ECS task Step 1: Storing Sensitive Environment Variables in Parameter Store AWS provides several products for the purpose of storing sensitive configurations, namely AWS SSM Parameter Store and AWS Secrets Manager. I use Parameter Store because of its' free 10,000 Standard tier parameters. To add a parameter, click "Create Parameter" in the Parameter Store Management Console: Fill up the form, then submit: We should see the parameters created: We will leave the parameters created for now. These will be consumed in a latter step. Step 2: Building and Pushing Image to Image Registry To deploy our Nuxt.js app to AWS ECS, we first require a repository to store our Docker image. For the sake of simplicity, I use AWS Elastic Container Registry (ECR). The provides a comprehensive list of steps to create a repository on AWS ECR. official guide Once the image repository is created, we can then build and push our image: docker build -t <image_name> . 

docker tag <image_name>:latest <remote_repository_url>

docker push <remote_repository_url> $ (aws ecr get-login --no-include-email --region <region>) Navigating to our repository with AWS Management Console, we should see our image pushed: Step 3: Create an ECS Task This details the steps to create a Task definition in ECS. It is highly suggested to read if you are not familiar with the concepts of Task and Service in ECS before moving forward. guide this While creating an ECS Task with the Management Console, you can now reference to parameters created in SSM Parameter Store by using the ARN of the parameters. Once the Task is created, we can then run it on ECS. Navigating the the endpoint of your Task, you should be able to see your app is up and running. Voila! Now we have a dockerized Nuxt.js SSR app that is running on ECS with sensitive environment variables stored on SSM Parameter Store. Have fun hacking around! This was first published on melvinkoh.me

Dockerizing and Deploying Nuxt.js SSR Apps To AWS ECS

offers a headless CMS that enables content managers and developers to work better together. By providing an intuitive Admin Dashboard, powerful APIs, and flexible user roles, applications are built faster, more light-weight, and your whole team ends up saving time in the process. To demonstrate how easy it is to get started with Cosmic JS, I’ll quickstart a using the and connect it with my Cosmic JS Bucket Dashboard. Cosmic JS Nuxt.js Website Boilerplate Cosmic JS CLI TL;DR: Nuxt.js Website Boilerplate Nuxt.js Website App Page Developer Docs Nuxt.js Knowledge Base Developer Articles: Nuxt.js QuickStart a Nuxt.js Website using a Headless CMS API is an example of a robust headless CMS and API that’s promoting collaboration on cross-functional teams to build apps faster. Get started building Cosmic-powered apps in seconds 🚀 We have , , , and Starters to help you get your project started quickly. There are over 70 app examples available in the Cosmic JS Apps Marketplace to speed up your project as well. Today we’ll be using the to quickstart a . Cosmic JS Node.js React Vue Gatsby Serverless Cosmic JS CLI Nuxt.js Website Boilerplate This website boilerplate satisfies some common website requirements including: dynamic pages blog articles author management SEO ability contact form website search 🛠️ Installation Install via the Cosmic CLI : I set up an example Bucket for this blog: Run for a list of all commands. Run for details on options for a specific command. You're now up and running with a that can be managed entirely from your Cosmic JS Bucket Dashboard and Command Line Terminal tool of choice. cosmic -h cosmic [command] -h Nuxt.js Website Boilerplate Conclusion I was able to easily install a using a headless CMS API that I can now use to manage dynamic content changes. When ditching the installed content management system and going API-first isn’t quick enough, check out the from Cosmic JS to get a project up and running in seconds. 🔥 Nuxt.js Website Boilerplate Starter Apps If you have any comments or questions about building Nuxt apps with Cosmic JS, and . reach out to us on Twitter join the conversation on Slack

QuickStart a Nuxt.js Website Using a Headless CMS API

Since I started making websites 3.5 years ago I’ve been using Sass. I flipping LOVE IT!!! I feel it fills in a lot of CSS’s missing features as well as making my styles much leaner and easier to work with. I’m trying to really make 2018 a year where I conquer VueJs. There’s a problem. I still want to have my Sass variables, functions and mixins available to all my single file Vue components. I also want to have a bunch if global CSS utility classes being created using the same variables, functions and mixins. Here’s how I go about this. Compiling Sass I have a collection of styles that I port over to each now project no matter whether I’m using , Rails or WordPress. (Badger SCSS will be getting released in April 2018). All my CSS selectors are utility classes that I wanted available for my Nuxt project. It’s super easy to do! I have a single Sccs file that I use to import all my separate SCSS files so this will be the file I want to compile from. You can include multiple files if you’d like but I really recommend having a single clean file that just takes care of all your importing. Vue.js Toolkit Ensure you and installed; node sass sass-loader npm i -D node-sass sass-loader 2. In your file include your SCSS where you import all your other SCSS. nuxt.config.js css: ['@/assets/scss/main.scss'] LIKE MAGIC! Now your SCSS is getting compiled and will be automatically inserted into a tag in your head. <style> For more info checkout the Nuxt.js docs on CSS. Edit 2/2/2019 — Updated Nuxt module instructions Nuxt Style Resources Module The awesome Nuxt community has created a package to take away ALL the pain of exposing Sass/SCSS files to your Vue.js components. While I did manage to expose files without this package, it was a bit of a pain. Install the package; npm i -D 2. You’ll need to make Nuxt aware of which file you want to be exposed by updating your ; nuxt.config.js module.exports = {// Other nuxt.config.js modules: \['@nuxtjs/style-resources'\],  
styleResources: {  
    scss: \[  
        'assets/scss/file/\_path.scss',  
        'assets/scss/file/\_path-two.scss'  
    \]  
} } It’s really THAT simple. For more information and detailed docs checkout the . Nuxt Style Resource loader’s Github repo Any questions/comments/bugs/feedback please get in touch! Thanks for reading. Old loading Sass loading plugin This plugin is now deprecated but this was how I used to access but this was my old instructions Nuxt Sass Resources Loader The awesome has created a package to take away ALL the pain of exposing Sass/SCSS files to your Vue.js components. While I did manage to expose files without his package, it was a bit of a pain. If you’re keen to do it on your own check out this Github issue thread where Sébastien Chopin shows you how to do it. Antério Vieira Install the package; npm i nuxt-sass-resources-loader 2. You’ll need to make Nuxt aware of which file you want to be exposed by updating your ; nuxt.config.js module.exports = {// Other nuxt.config.js modules: \[  
    \[  
        'nuxt-sass-resources-loader',   
        \[  
            'assets/scss/file/\_path.scss',  
            'assets/scss/file/\_path-two.scss'  
        \]  
    \]  
\] } It’s really THAT simple. For more information and detailed docs checkout the . Nuxt Sass resources loader’s Github repo

How I use Scss variables, mixins & functions globally in Nuxt.js

Photo by on Austin Neill Unsplash Three years ago, we fell down a rabbit hole. We landed in a strange frontier of web development. Talks of “static” and “serverless” sites, dedicated APIs, and burgeoning frontend wonders were common. JavaScript was everywhere. Developers were excited to build sites again. We had entered the universe. JAMstack On our blog, we’ve already discussed countless to store content and JS frameworks to render it. headless CMS Today, we keep exploring: 1) , an API-first CMS recommended by a friend, and 2) , a kickass Vue.js framework (we’ve wanted to use it ). Cockpit CMS Nuxt.js ever since we fell in love with Vue We’ll cover: How to set up a Cockpit CMS installation & plug it with Snipcart. How to use Nuxt.js static generation to render the frontend of our app. The result? A full JAMstack app: headless content management, frontend rendered in a JS framework, & shopping through an e-commerce API. We’ll also throw in a live demo and code repo at the end! But first, a few important definitions. What is Cockpit CMS? Our content data will be stored in : Cockpit Cockpit is an open source, API-driven CMS that lets you implement your site without compromises. Developer crafted a system made to build simple dynamic websites without jumping through the hoops of WordPress, Drupal and the likes. Artur Heinze Its API-first approach (aka “headless”) allows for content management that is from content rendering. You can learn more about it . decoupled in this primer on headless CMS Cockpit runs on PHP and is, at its core, a developer-first CMS. Here are some of its cool features: Self hosted : runs on a , no need for full SQL server Fast & lightweight lightweight database engine : implement on your site the way you want Flexible : easy for devs to create their own modules Expandable Modern & simple UI : markdown, assets, thumbnails, etc. Built-in tools What is Nuxt.js? will have our frontend covered for this one. Nuxt.js We had the chance to a lot lately, and were naturally intrigued by the Vue application framework that is Nuxt. play with Vue.js In a nutshell, Nuxt allows you to create apps where your can execute on both client and server. Universal Vue.js JavaScript Its main scope is UI rendering while abstracting away the client/server distribution. Like Vue, it can be used to start a project from scratch, or to improve on an existing one. Inspired by , Nuxt is a go-to solution for building SSR (Server Side Rendered) Vue apps. It’s also pretty good at generating static sites, thanks to its command. React’s Next.js generate And here’s a peek at how this little marvel actually works: Nuxt.js rendering process [source] We’ve seen comprehensive Nuxt.js examples & tutorials pop up ( & ) recently. In this one, we’ll see how an actual integration of Nuxt.js with an API-first CMS can work. here here Cockpit CMS Tutorial with Nuxt.js & Snipcart Pre-requisites Before building our awesome cosplay shop demo (yup, that’s right), you’ll need: If you are hosting Cockpit locally PHP >= 5.4 PDO with SQLite support (or MongoDB) GD extension enabled If you are hosting it somewhere A web server with the above specs (forever free in Test mode) A Snipcart account 1. Installing Cockpit CMS Go to the CMS . We’ll use the “Official release” here, to avoid unstable features. download page I’ll install Cockpit on its own instance. It’ll then be possible to access it with , and the public website with . cockpit.local snipcart-shop.local Once the installation is complete, go to to finish up. cockpit.local/install If you intend to push this installation live, . you should change your username and password 2. Creating products to sell with Snipcart We’ll create products in our CMS first. Start a new called . A is a way to hold all the content from a data structure. It's in a way the bread and butter of Cockpit CMS; lots of operations are done in this section. collection Product collection In this collection, we add the following fields: A field named . text Name A field named . text Description A field named . media Image A field named . text Price We now have to generate an API key to use Cockpit’s services, to do so, go to Settings (hamburger menu, top left corner), then General > API > Generate API token. Finally, we only need to add our products to our shop’s content repo: For this demo, we installed Cockpit on an Azure free site. It was very easy to set up: we pushed our code on GitHub and enabled automatic Git deploys in Azure. 3. Using & understanding Nuxt.js For the client-facing store itself, we’ll dive into Nuxt. First off, I must say I working with Nuxt. It’s super straightforward, their documentation is neat, and, as you already know, we’re currently on a honeymoon with Vue.js. loved First thing to get started is to install Nuxt and scaffold our project. We’ll need installed. If you don't have it, run: . vue-cli npm install vue-cli -g Then, we’ll scaffold the project with the Nuxt starter template: That’s it for the installation. You can start the dev server using: npm run dev Nuxt.js key concepts Let’s talk a bit about how Nuxt works. The first thing to understand is the . A page in Nuxt is kind of a . It's a Vue component that will be automatically added to the application routes. For instance, in the default files, you have this component: . This component will be rendered when you hit your application root URL at (if you're running the dev server). pages route pages/index.vue http://localhost:3000 If you want to create a products page, you could add a component named in the folder and then you would get this URL working: products.vue pages [https://localhost:3000/products](https://localhost:3000/products.) . Nuxt takes care of the routing automatically; you don’t have to register routes or anything. The component will be mounted instantly, and you will even be able to render a statically generated site with it. We’ll do this later in the tutorial. There’s also another important concept in Nuxt: . You'll see this folder in the project created by the starter template. In it, you'll want to add child components to be used in your pages. We'll create one in the post. components Another thing we’ll see are the . Layouts are used to define the skeleton of your site, it's usually where you will add your navigation and footer for example. layouts Last thing we’ll tackle is the file. It allows you to define which libraries or CSS you want to include globally and . nuxt.config.js much more You can also add your own configuration settings if needed. This is what we’ll do first, with Cockpit settings. We’ll use these when calling Cockpit CMS API to retrieve products data. Configuring Nuxt.js Open and add: nuxt.config.js We’ll replace with our own URL and with the API token we've generated in Cockpit. <cockpit-url> <api-token> You’ll now have access to these environment variables in your pages. Creating our layout Before creating the first page, we’ll need to make some changes to the layout. In addition to and , Nuxt also has a concept of layouts. Consider it a "master" page. This page must contain a special tag: . pages components <nuxt /> Mine looks like: Page components will be rendered inside the tag. <nuxt /> Creating pages Now for our first page. Open and remove everything. Let's start from scratch. index.vue We’ll begin by creating the template part of the component. This template will be in charge of rendering all products. Asking yourself where do the classes come from? I used , a CSS framework for the demo. It provides useful components and styles to get a good looking demo quickly. columns, is-mobile, is-multiline, is-centered, etc. [Bulma](http://bulma.io/) To add the reference to , I opened and added this object in the array: Bulma nuxt.config.js link While we’re here, we’ll also add Snipcart’s default CSS: Our head object should now look like: Any stylesheets added there will be included automatically in all pages. Notice the tag? This is a component we'll create later. small-product Now, we need to fetch our products. Nuxt provides a very awesome method for pages component: . asyncData It's important to know that this method can't be used in child components, only in pages components. This method will allow us to fetch data remotely before rendering the page itself. It’s especially useful when creating a static site! To interact with Cockpit API, we’ll use , a popular HTTP client in JavaScript: Axios npm install axios --save Our component should look like: In the method, I used Axios to fetch my products and generate thumbnails. Cockpit offers API endpoints for that. Notice the parameters the method receives: . The object will contain the settings set in . asyncData {env, params} env nuxt.config.js Your page component will receive a list of products when mounted. Awesome, right? Creating components For this to work, we’ll need to create the component . In the folder, create a new file named . SmallProduct.vue components SmallProduct.vue This component will render product details and Snipcart’s buy button. Now run: npm run dev Open your browser to and you should see something awesome! http://localhost:3000 4. Deploying our JAMstack bundle Job’s (almost) done! Our Cockpit + Nuxt store lacks one last thing: deployment. As we often do, we’ll use Netlify for hosting. Just create a new site in Netlify and use: npm install && npm run generate We’ll set the publish directory to . dist Give Netlify some time to build your site, and you’re done! GitHub repo & live demo Go ahead, check out the demo & code repo for this tuts! See GitHub code repo See live Cockpit + Nuxt.js demo Conclusion Well, this was a long one. I’ll keep the outro brief. ;) While Cockpit doesn’t offer hosted instances, it provides developers with a very malleable content API. Especially if you’re a PHP fan. Based on my tests, perf looks quite good & stable too. It’s still a young, free headless CMS, and there’s room to improve, visually and functionally speaking. Good news is: it’s ! So don’t hesitate to jump in and collaborate. open source As for Nuxt, well, I loved it! I guess it transpired enough in the post. Please give it a try if you want to fast-track SSR or static Vue apps development. If you’ve enjoyed this post, please take a second to share it on Twitter . Comments, questions? Section below is all yours! I originally published this on and shared it in our . the Snipcart Blog newsletter https://upscri.be/hackernoon/

A Tutorial to Bundle Cockpit CMS & Nuxt.js in a full JAMstack

In this tutorial I’m going to show you how to create a “Tutorials Portfolio” app using , and . For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic JS API in order to retrieve, update, and delete data in our Cosmic JS buckets. Let’s get started. Nuxt.js Cosmic JS TL;DR Download the GitHub repo. Check out the demo. Getting Started: First, let’s make a new directory to build our project in and lets also make a package.json file. mkdir cosmicapp-tutorials cosmicapp-tutorials$ touch package.json Now, in your package.json, copy and paste the code below: { "name": "cosmicapp-tutorials", "version": "1.0.0", "description": "Nuxt.js project", "author": "kutsaniuk@gmail.com", "private": true, "scripts": { "dev": "NODE_ENV=development nuxt", "build": "nuxt build", "start": "npm run build; NODE_ENV=production HOST=0.0.0.0 nuxt start" }, "dependencies": { "axios": "^0.16.2", "body-parser": "^1.17.2", "cross-env": "^5.0.5", "express": "^4.15.3", "express-session": "^1.15.3", "http": "0.0.0", "nuxt": "^1.0.0-rc11", "sha1": "^1.1.1", "vue-notification": "^1.3.4" }, "devDependencies": { "babel-eslint": "^7.2.3", "eslint": "^4.3.0", "eslint-config-standard": "^10.2.1", "eslint-loader": "^1.9.0", "eslint-plugin-html": "^3.1.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.1.1", "eslint-plugin-promise": "^3.5.0", "eslint-plugin-standard": "^3.0.1" } } Second, let’s make a nuxt.config.js file. cosmicapp-tutorials$ touch nuxt.config.js Now, in your nuxt.config.js, copy and paste the code below: //cosmicapp-tutorials/nuxt.config.js const bodyParser = require('body-parser') const session = require('express-session')

 module.exports = {

 dev: (process.env.NODE_ENV !== 'production'), head: { title: 'cosmicapp-tutorials', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, loading: { color: '#585858' }, build: { vendor: ['axios', 'vue-notification'] }, serverMiddleware: [ bodyParser.json(), session({ secret: 'super-secret-key', resave: true, saveUninitialized: false, cookie: { maxAge: 60000 } }), '~/api' ], env: { bucketSlug: process.env.BUCKET_SLUG || 'tutorials', readKey: process.env.READ_KEY || 'anyI1DP1bxB5ivjCaJSRC0ZFxB5SJDpfYgrDfR47fw7HIlWYAX', writeKey: process.env.WRITE_KEY || 'J72v1YeK8zZF6n0dI8yhiVTzQy75JASppAQe8XPykiJHW9ARfz' } } Building our app: Now we’re going to build out our file structure a bit more so that we can organize our vue files. This is what our cosmicapp-tutorials directory should look like: cosmicapp-tutorials |----api | |----index.js |----assets | |----css | |----fonts | |----images | |----sass |----layouts | |----default.vue |----middleware | |----auth.js |----pages | |----add | |----index.js | |----articles | |----_id.js | |----blog | |----index.js | |----edit | |----_id.js | |----login | |----index.js | |----profile | |----_id.js | |----register | |----index.js | |----index.vue |----static |----store |----nuxt.config.json |----package.json Now we we will set up our default.vue. Copy and paste the following code into your default.vue file: <template><div v-bind:class="{ 'is-menu-visible': isMenuVisible}"><div id="wrapper"><header id="header"><div class="inner"><nuxt-link to="/" class="logo"><span class="symbol"><img src="~/assets/images/logo.svg" alt=""/></span><span class="title">Tutorials</span></nuxt-link><pre v-bind="$store.state.authUser"></pre>   
    <nav @click="isMenuVisible = true">  
    <ul>  
    <li><a href="#menu">Menu</a></li>  
    </ul>  
    </nav>

    </div>  
    </header>  
    <nuxt/>  
    <footer id="footer">  
    <div class="inner">  
    <ul class="copyright">  
    <li><img class="cosmic-logo" src="https://cosmicjs.com/images/logo.svg" width="20" height="20"><a href="https://cosmicjs.com/">Proudly powered by Cosmic JS</a></li><li>Copyright: <i class="fa fa-copyright"></i> Photography Portfolio App 2017</li>  
    </ul>  
    </div>  
    </footer>  
    </div>  
    <nav id="menu" @click="isMenuVisible = false">  
    <div class="inner">  
    <h2>Menu</h2>  
    <ul>  
    <li><nuxt-link to="/">Home</nuxt-link></li>

    <li v-if="!$store.state.authUser"><nuxt-link to="/login">Login</nuxt-link></li>  
    <li v-if="!$store.state.authUser"><nuxt-link to="/register">Register</nuxt-link></li>

    <li v-if="$store.state.authUser"><nuxt-link v-bind:to="'/profile/' + $store.state.authUser.user\[0\].value">Profile</nuxt-link></li>  
    <li v-if="$store.state.authUser"><a href="#" @click="logout()">Logout</a></li>  
    </ul>  
    </div>  
    <a class="close" @click="isMenuVisible = false" href="#menu">Close</a>  
    </nav>  
    </div>

    </template>

    <script>  
    export default {

    data () {  
    return {  
    isMenuVisible: false  
    }  
    },  
    methods: {  
    async logout () {  
    await this.$store.dispatch('logout')  
    }  
    }  
    }  
    </script>

    <style src="~/assets/css/main.css"></style> After that we can create index.vue. Copy and paste the following code into your index.vue file: <template> <div id="main"> <div class="inner"> <header> <h1>You are browsing the best resource <br> for Online Education.</h1> <p>Just clear crisp and to the point content, nothing else.</p> </header> <section class="tiles"> <article v-bind:class="'style' + (index + 1)" v-for="(article, index) in articles"> <span class="image"> <img v-if="article.metadata" :src="article.metadata.image.url" alt=""/> </span> <nuxt-link v-bind:to="'/articles/' + article.slug" class="logo"> <h2>{{article.title}}</h2> <div class="content" v-html="article.content"></div> </nuxt-link> </article> </section> </div> </div> </template>

 <script> import axios from 'axios'

 export default {

 asyncData () { return axios.get(`https://api.cosmicjs.com/v1/tutorials/object-type/articles?read_key=${process.env.readKey}`) .then((res) => { return { articles: res.data.objects } }) }, head () { return { title: 'Tutorials' } } } </script> Now we we will set up our store/index.vue. Copy and paste the following code into your store/index.vue file: import axios from 'axios';var sha1 = require('sha1'); export const state = () => ({authUser: null}) export const mutations = {SET_USER: function (state, user) {state.authUser = user}} export const actions = {// nuxtServerInit is called by Nuxt.js before server-rendering every pagenuxtServerInit ({ commit }, { req }) {if (req.session && req.session.authUser) {commit('SET_USER', req.session.authUser)}},async login ({ commit }, { username, password }) {axios.get('https://api.cosmicjs.com/v1/' + process.env.bucketSlug + '/object-type/users/search', {params: {metafield_key: 'username',metafield_value_has: username,limit: 1,read_key: process.env.readKey}}).then(function (response) {if (response.data.status !== 'empty') {axios.get('https://api.cosmicjs.com/v1/' + process.env.bucketSlug + '/object-type/users/search', {params: {metafield_key: 'password',metafield_value: sha1(password),limit: 1,read_key: process.env.readKey}}).then(function (response) {if (response.data.status !== 'empty') {axios.post('/api/saveSession', response.data.objects[0]).then(function (response) {commit('SET_USER', response.data);window.location.href = '/profile/' + username;});}}) }  
        })  
},  
async register ({ commit }, { username, password }) {  
    axios.post('https://api.cosmicjs.com/v1/' + process.env.bucketSlug + '/add-object', {  
            write\_key: process.env.writeKey,

            title: username,  
            type\_slug: 'users',  
            slug: username,  
            metafields: \[  
                {  
                    key: "username",  
                    type: "text",  
                    value: username  
                },  
                {  
                    key: "password",  
                    type: "text",  
                    value: sha1(password)  
                }  
            \]  
        })  
        .then(function (response) {  
            axios.post('/api/saveSession', response.data.object)  
                .then(function (response) {  
                    commit('SET\_USER', response.data);  
                    window.location.href = '/profile/' + username;  
                });  
        });

},  
async logout ({ commit }) {  
    await axios.post('/api/logout')  
    window.location.href = '/login';  
    commit('SET\_USER', null)  
} } Now we we will set up our auth.js. Copy and paste the following code into your middleware/auth.vue file: export default function ({ store, error }) {if (!store.state.authUser) {error({message: 'You are not connected',statusCode: 403})}} What’s going on here: We created default layouts. We created store/index.js for login, register and sessions. We created middleware/auth.js for checking that user logged in. Conclusion: We were able to consume the Cosmic JS API with our actions and dispatcher functions. I hope you enjoyed this tutorial as much as I did, if you have any questions and . reach out to us on Twitter join our community on Slack

How to Build a Tutorials App Using Nuxt.js

User can be difficult and time consuming. Getting it wrong can also have disastrous consequences, such as malicious users accessing and stealing personal or sensitive information from your app. authentication and authorization Unless you are a large organisation that can afford to spend lots of time on developing a bespoke authentication/authorization system, it is often best to make use of existing solutions to streamline your development process and give you peace of mind. Auth0 Auth0 is one such solution, and could be called Authentication as a Service (AaaS) or Identity as a Service (IDaaS). In short, it is a complete user management system that can be used to authenticate requests to your application. It has plenty of built in features that you would expect from modern authentication, such as social login (Google, Facebook, etc.), Single Sign On (SSO), and Multi-Factor Authentication. Basic Authentication Flow Below is a diagram outlining the basics of how authentication works using Auth0. First the user attempts to log in from the client (e.g. web browser) by providing their username/password, or using social sign in. The login request is sent to Auth0 and, if successful, Auth0 returns an access token. When the client attempts to access a resource from the backend API, it sends the access token along with the request. The backend API will receive the request with the access token. It will first check with Auth0 to ensure that the token is valid, and, if successful, will return the requested resource. Authentication using Auth0, ASP.NET Core and Nuxt.js I have created a GitHub repository for this tutorial. Please find it . here Auth0 Configuration If you don't already have an Auth0 account, go ahead and . create one here Log in to you Auth0 account and go to the Applications tab. Click on Create Application and create a new Single Page Web Application. Go to the settings tab of your newly created application and make note of the Domain and Client ID - we will need these later. On the same page scroll down to Application URIs and fill in the following fields: Allowed Callback URLs = http://localhost:3000/login Allowed Web Origins = http://localhost:3000 Allowed Origins (CORS) = http://localhost:3000 NOTE: http://localhost:3000 is the default URL of the Nuxt app. If you are using a different port, change the above values accordingly. Make sure that you Save Changes. Next we need to tell Auth0 about our API. Go to APIs and click Create API. Fill in a Name and an Identifier, then click Create. Make a note of the Identifier as we will need this later. And that's it for the Auth0 configuration! Next let's move on to creating our API with ASP.Net Core. ASP.NET Core API Start by creating a new ASP.NET Core API project using the Visual Studio project templates (Create a new project -> ASP.NET Core Web Application -> API). You will need the  following NuGet packages installed: Microsoft.AspNetCore.Authentication.JwtBearer
Microsoft.AspNetCore.Authentication.OpenIdConnect NOTE: These packages were installed by default using the .NET 5.0 project template, but I believe these will need to be installed manually if you are using .NET Core 3
. In order to validate access tokens against Auth0, our API needs to know the Domain and Identifier values that we got from Auth0 earlier. I've opted to save these using for added security. User Secrets Navigate to the APIs project folder and run the following commands: dotnet user-secrets init
dotnet user-secrets dotnet user-secrets set "Authentication:Auth0:Authority" "MyDomain" set "Authentication:Auth0:Audience" "MyIdentifier" Next we need to configure the Startup class. In the ConfigureServices method, add the following lines of code: services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
}).AddJwtBearer(options =>
{ auth0Authentication = Configuration.GetSection( );

    options.Authority = auth0Authentication[ ];
    options.Audience = auth0Authentication[ ];
}); var "Authentication:Auth0" "Authority" "Audience" This configures ASP.NET Core to authenticate using a JWT Bearer and verify it against Auth0 using the values we just save in User Secrets. We also need to add a few line of code to the Configure method. Since order is very important in order to configure the middleware pipeline properly, I'll just paste the whole method: {
    app.UseHttpsRedirection();

    app.UseCors(builder =>
    {
        builder
            .WithOrigins( )
            .AllowAnyMethod()
            .AllowAnyHeader();
    });

    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
} ( ) public void Configure IApplicationBuilder app, IWebHostEnvironment env "http://localhost:3000" Here we are adding a CORS policy to allow requests to the API from our Nuxt app (which is served by default on http://localhost:3000). Secondly, we are calling app.UseAuthentication(), which will tell the app to use the authentication middleware, using the configuration we added in the ConfigureServices method. The final thing we need to do is decide which controllers/actions we want to protect. If you created your project from the Visual Studio template, you should already have a WeatherForecastController. I'm just going to protect the whole controller, by adding the [Authorize] attribute to the top of the controller. ...
[ ] : {
... Authorize public class WeatherForecastController ControllerBase Nuxt Client To get started with creating the Nuxt client, run: yarn create nuxt-app my-app-name And just go with the default options. We then need to install a couple of Nuxt modules. Navigate to the root directory of the Nuxt project (should contain `package.json`) and run the following command. yarn add @nuxtjs/axios @nuxtjs/auth @nuxtjs/dotenv This will install Axios (which we will use to make requests to our API), the Auth module (which simplifies managing authentication on the Nuxt client), and the Dotenv module (which allows us to save our secret Auth0 values in a .env file). Next create a .env file in the root directory of your Nuxt project and add the following lines (substituting in your Auth0 values): AUTHENTICATION_AUTH0_DOMAIN=MyDomain
AUTHENTICATION_AUTH0_CLIENT_ID=MyClientID
AUTHENTICATION_AUTH0_AUDIENCE=MyIdentifier Next we move on to configuring Nuxt my making some changes to the nuxt.config.js file. First we will tell Nuxt simply to use the module that we just installed using by adding the following lines: buildModules: [
  '@nuxtjs/dotenv'
],
modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth',
], Then we'll configure Axios to have a base URL pointing to our API. In my case, the port was 44363, but this may well be different for your project. axios: {
  baseURL: 'https://localhost: '
}, 44363 The next lines of configuration tell the Nuxt router to use the Auth module as middleware. This means that before the user navigates to any page, the Auth middleware will check that the user is authenticated (and if not redirect to the login page). This configuration will protect all routes in your client app. However, , if you so wish. there are ways to only protect specific routes router: {
  middleware: ['auth'],
}, Finally we will configure the Auth middleware to read the secret Auth0 values from the .env file, and store it in a strategy called auth0. auth: {
  strategies: {
    auth0: {
      domain: process.env.AUTHENTICATION_AUTH0_DOMAIN,
      client_id: process.env.AUTHENTICATION_AUTH0_CLIENT_ID,
      audience: process.env.AUTHENTICATION_AUTH0_AUDIENCE
    }
  }
} And that's it for nuxt.config.js. The final bit of configuration we need to do is to create an empty index.js file inside the store directory. This is because the Auth middleware uses the Nuxt store to store authentication information, and in Nuxt the store file must exist (but can be empty) in order to activate the store. The final thing that we need to do is create a couple of pages. We will start by creating a basic index page that simply tries to get the weather forecast list from our API and display it on the page. This will be a protected page, so when we are not logged in, we will be redirected to login. It's also important to note that API is also protected, so even if a user managed to gain access to the index page when not authenticated, the API would still refuse to send the data. This is an important principal in web app design - no matter how much protection you put on the front end, the backend API should still be protected and verify everything the user sends, since it is possible for a malicious user to modify anything that comes from the frontend. // pages/index.vue Weather Forecast < > template < > div < > h1 </ > h1 {{ response }} </ > div </ > template < > script {
  data() { { : []
    }
  }, mounted() { .response = .$axios.$get( )
  }
} export default return response async this await this 'weatherforecast' </ > script And the login page will simply contain a button that redirects us to the Auth0 login screen. Since we configured the auth0 strategy for our Auth module, the loginWith('auth0') method knows where to send our request. // pages/login.vue Login Login with Auth0 < > template < > div < > h1 </ > h1 < @ = > button click "onClick" </ > button </ > div </ > template < > script { : {
    onClick() { .$auth.loginWith( )
    }
  }
} export default methods this 'auth0' </ > script And that's it! Try running both the API and the Nuxt client projects and navigate to the base URL of the Nuxt project (http://localhost:3000). You should automatically be redirected to the login page. Clicking the button should redirect you to the Auth0 sign in page. Sign in with whichever method you have configured for Auth0. If sign in is successful, you will be redirected back to the index page of your Nuxt app. Since you are now logged in, when the client requests the weather forecast from the API, it will also send along with the request the Auth0 Bearer token. The API will then check the token against Auth0 and return the weather forecast object. Conclusion In this post, I showed you how to protect a Nuxt client app and a ASP.NET Core API with Auth0 in a few simple steps. Using Auth0 is a great way to add authentication to your apps without any or the hassle of developing your own authentication management system. Please feel free to check out the completed project in . my GitHub repo Since it's almost Christmas, you could also check out my Top Christmas Gifts To Buy A Developer post that was featured on Hashnode recently. I post mostly about full stack .NET and Vue web development. To make sure that you don't miss out on any posts, please follow this blog and . If you found this post helpful, please like it and share it. You can also find me on . subscribe to my newsletter Twitter Previously published at https://samwalpole.com/web-app-authentication-using-auth0-aspnet-core-and-nuxtjs

Authentication in Web Apps: Connecting Auth0, ASP.NET Core and Nuxt.js

That’s a mouthful of a title right there. Don’t let it scare you away. What it boils down to is rather simple. We want the best of both worlds. The SEO boost server-side rendering provides, and the speed of a Single Page Application. All this while hosted basically for free in a serverless environment on AWS Lambda. TL;DR Here’s a quick overview of what we’ll be building for you to get up to speed. Feel free to jump to the step that interests you the most. Don’t mind me guilt tripping you into reading the whole thing… * * 😐 stares guilt trippingly What’re we building? Configure and install dependencies Build the app with the and Serverless Framework Nuxt.js Deploy the app to AWS Lambda Test the app with Dashbird Note : The code we will write is already on GitHub if you need further reference or miss any steps, feel free to check it out. What’re we building? Well, first thing’s first. We want a super fast Single Page Application. But, this usually comes with a cost. Lousy SEO capabilities. That won’t do, meaning we also want the app to have server-side rendering. Okay, sounds simple. We’ll grab , which is a framework for creating universal applications, and configure it to server-side render our pages. Nuxt.js Vue.js To accomplish this we need to spin up a simple Express server and configure the Nuxt renderer to serve files through Express. It is way simpler than it sounds. However, the key takeaway here is the word . Ew, we don’t like mentioning that word. So, what do we need to do? Well, deploy this whole application to ! It is a tiny Node.js instance after all. server AWS Lambda But this raises a concern. How to monitor and debug it if everything goes horribly wrong? I usually have opened in a separate tab to monitor all my serverless resources in real time. Dashbird Phew, with that out of the way, let’s get crackin’! Configure and install dependencies As always, we’re starting with the boring part, setting up the project and installing dependencies. 1. Install the Serverless Framework In order for serverless development to be absolute torture, go ahead and install the . not Serverless framework $ npm i -g serverless Note: If you’re using Linux or Mac, you may need to run the command as _sudo_ . Once installed globally on your machine, the commands will be available to you from wherever in the terminal. But for it to communicate with your AWS account you need to configure an IAM User. Jump over , then come back and run the command below, with the provided keys. here for the explanation $ serverless config credentials \     --provider aws \     --key xxxxxxxxxxxxxx \     --secret xxxxxxxxxxxxxx Now your Serverless installation knows what account to connect to when you run any terminal command. Let’s jump in and see it in action. 2. Create a service Create a new directory to house your Serverless application services. Fire up a terminal in there. Now you’re ready to create a new service. What’s a service you ask? View it like a project. But not really. It’s where you define AWS Lambda functions, the events that trigger them and any AWS infrastructure resources they require, all in a file called . serverless.yml Back in your terminal type: $ serverless create \    --template aws-nodejs \    --path serverless-side-rendering-vue-nuxt The create command will create a new . Shocker! But here’s the fun part. We need to pick a runtime for the function. This is called the . Passing in will set the runtime to Node.js. Just what we want. The will create a folder for the service. service template aws-nodejs path 3. Install npm modules Change into the folder in your terminal. There should be three files in there, but for now, let’s first initialize npm. serverless-side-rendering-vue-nuxt After the file is created, you can install a few dependencies. package.json $ npm i axios nuxt express serverless-http serverless-apigw-binary These are our production dependencies, and I’ll go into more detail explaining what they do a bit further down. Apart from them, we need one more as a development dependency. This one will let us tie a domain to our endpoints. Sweet! $ npm i --save-dev serverless-domain-manager Now, your should look something like this. package.json We also need to add two scripts, one for running on our local dev machine and one for building and deploying the app. You can see them in the section of the . nuxt scripts package.json 4. Configure the serverless.yml file Moving on, let’s finally open up the project in a code editor. Check out the file, it contains all the configuration settings for this service. Here you specify both general configuration settings and per function settings. Your will be full of boilerplate code and comments. Feel free to delete it all and paste this in. serverless.yml serverless.yml The property lists all the functions in the service. We will only need one function because it will run the Nuxt rendering. It works by spinning up a tiny Express app, connecting the Nuxt renderer middleware to the Express router and passing the app to the module. In turn, this will bundle the whole Express app into a single lambda function and tie it to an API Gateway endpoint. Under the functions property, you can see a function that will have a handler named in the file. API Gateway will proxy any and every request to the internal Express router which will tell the Nuxt renderer to render our Vue.js pages. Woah, that sounds complicated! But it's really not. Once we start writing the code you'll see how simple it really is. functions serverless-http nuxt nuxt index.js We’ve also added two plugins, the for letting more mime types pass through API Gateway and the which lets us hook up domain names to our endpoints effortlessly. serverless-apigw-binary serverless-domain-manager We also have a section at the bottom. The property acts as a way to safely load environment variables into our service. They're later referenced by using where the actual values are kept in a simple file called . custom secrets ${self:custom.secrets.<environment_var>} secrets.json Apart from that, we’re also letting the API Gateway binary plugin know we want to let all types through, and setting a custom domain for our endpoint. That’s it for the configuration, let’s add the file. secrets.json 5. Add the secrets file We all know pushing private keys to GitHub kills baby penguins. Let’s not do that. Handling this with the Serverless Framework is simple. Add a file and paste this in. secrets.json Now, only by changing these values you can deploy different environments to different stages and domains. Pretty cool. Build the app with the Serverless Framework and Nuxt.js We’ll use Nuxt.js to build our universal Vue.js app. What does this mean? Well, let’s keep it simple, it’s just a server-side rendered single page application. Meaning you don’t need to worry about SEO because it’ll render the JavaScript before sending it to the client. But, once it’s loaded in on the client side, it won’t ask for the file again, and cache it instead. More speed! I love it. Let’s jump in. 1. Setting up the Nuxt.js server(less)-side rendering For Nuxt to work at all we need a file to add our build configuration. nuxt.config.js You can see we required the file in order to load our stage in the URL to the static files. You'll see why this is important once we add the route in the Express router below. Also, check the , it specifies the name of the folder where our client-side files are located. secrets.js publicPath srcDir Once this is added, create another file named . Really intuitive, I know. nuxt.js This is pretty straightforward. We’re grabbing Express and Nuxt, creating a static route with and passing it the directory of the bundled JavaScript that Nuxt will create. Here the path is but because API Gateway adds the stage as a postfix, we needed to specify it in the in the above mentioned file. express.static /_nuxt publicPath nuxt.config.js Once the configuration is loaded, there’s nothing left to do except pass the middleware to the Express app. nuxt.render Now, the app needs to be hooked up to and exported as a lambda function. Create an file and paste this in. serverless-http index.js As you can see we also need to create file to hold all the mime types we want to enable. It'll just a simple array which we pass into the module. binaryMimeTypes.js serverless-http Sweet, that’s it regarding the Nuxt setup. Let’s jump into the client-side code! 2. Writing client-side Vue.js In the root of your project create a new folder and name it . If you scroll up we set the in the file to point to a directory named . client srcDir nuxt.config.js client In this folder, create three more folders named, , , . Once inside folder, create a new file with the name , and paste this in. client components layouts pages layouts default.vue The default view will have the component and the component with rendered content from Nuxt. <navbar/> <nuxt/> Now add the file in the folder. navbar.vue components This is an incredibly simple navigation that’ll be used to navigate between some cute dogs. It’ll make sense once we add something to the folder. pages In the folder create an file and add the code below. pages index.vue The file will be rendered on the root path of our app. It calls a dog API and will show a picture of a cute dog. To create more routes, create a sub-folder called and create an file and a file in there. The will be rendered at the route while the will be rendered at where the represents a route parameter. index.vue dogs index.vue _breed.vue index.vue /dogs _breed.vue /dogs/:breed :breed Add this to the in the directory. index.vue dogs And, another snippet in the file in the folder. _breed.vue dogs As you can see in these files there’s a function. It will add custom fields in the of your page, giving it proper SEO support! head() <head> Note : If you’re stuck, here’s what the code looks like in the repo . Let’s deploy it and see if it works. Deploy the app to AWS Lambda At the very beginning, we added a script to our called . It'll build the Nuxt app and deploy the serverless service as we specified in the . package.json deploy serverless.yml All you need to do is run: $ npm run deploy You’ll see the terminal return some output with the endpoint for your app. But, there’s one more thing for us to do. We need to add the domain. We’ve already added the configuration in the but there's one more command we need to run. serverless.yml $ sls create_domain This will create a CloudFront distribution and hook it up to your domain. Make sure that you’ve added the certificates to your AWS account. It usually takes around 20 minutes for AWS to provision a new distribution. Go have a coffee. $ npm run deploy Back? Okay, go ahead and deploy it all once again. You’ll still be able to use the default endpoints, but now you also have it tied up to your domain. Here’s what it should look like. Sweet, your app is up-and-running. Go ahead and try it out. Test the app with Dashbird I usually look at my Dashbird metrics while testing an app to make sure it all works as expected. If it does, there shouldn’t be any errors in the browser console, nor in the Dashbird app. What’s cool is that is to . That’s a win-win by my book. Dashbird free, and doesn’t require a credit card sign up The logs on my end are showing all green, so it’s working perfectly! That’s in, the app is done. You’ve created a server-side rendered Vue.js app with Nuxt.js, hosted it in a serverless environment on AWS Lambda, and added a way to monitor and debug your app before your users start complaining. Doesn’t get any better than that. Wrapping up This is a whole new way of thinking about creating fast and responsive websites. There are absolutely no servers you need to worry about. Just deploy the code and rest assured it’ll work. If something breaks, you have watching your back, alerting you in Slack if something is wrong. Damn, I love Slack integrations. Dashbird If you got stuck anywhere take a look at the for further reference, and feel free to give it a star if you want more people to see it on GitHub. GitHub repo If you want to read some of my previous serverless musings head over to or my profile join my newsletter! Or, take a look at a few of my articles right away: Building a serverless contact form with AWS Lambda and AWS SES A crash course on Serverless APIs with Express and MongoDB Solving invisible scaling issues with Serverless and MongoDB How to deploy a Node.js application to AWS Lambda using Serverless Getting started with AWS Lambda and Node.js A crash course on securing Serverless APIs with JSON web tokens Migrating your Node.js REST API to Serverless Building a Serverless REST API with Node.js and MongoDB A crash course on Serverless with Node.js I also highly recommend checking out about Nuxt.js, and about the serverless domain manager. this article this tutorial Hope you guys and girls enjoyed reading this as much as I enjoyed writing it. If you liked it, slap that tiny heart so more people here on Medium will see this tutorial. Until next time, be curious and have fun. Originally published at dev.to .

A crash course on serverless-side rendering with Vue.js, Nuxt.js and AWS Lambda

Article originally written by Sergey Ukolov in Cosmic JS Developer Articles. allows you to easily create nested Object structures and upload media files. In this tutorial we will learn how nested structures are built and how you can fetch this data from the to use in a simple, personal music website powered by Cosmic JS and Nuxt.js. Cosmic JS Cosmic JS API TL;DR: Personal Music Site Demo Personal Music Site Codebase Intro As there are already numerous articles where you can learn how to work with the Cosmic JS Dashboard, we will use an already prepared Bucket snapshot. Create a Bucket At first, you will need to create a fresh Bucket as the next step . will remove all data from it Download base which contain Bucket Objects template description as well as some demo data for our app. To import it to your Bucket simply follow your Bucket dashboard page and navigate to section; you will see the button — click it and select file you downloaded before. bucket.json Settings > Import / Export Add import file bucket.json Now your Bucket with freshly imported Object templates allow you to build Objects into next structures: In Cosmic JS when you need to nest/link Objects into another Object you use the Multiple Objects Relationship metafield. Then, when you fetch the Object you will get all items related to it by Metafield objects. In next paragraph you will see how to deploy an app that accesses such structures with just one Cosmic JS API request. root Deploy the application To deploy an actual app follow next steps: 1) Clone the repository to your machine and go to freshly created folder 2) Install app dependencies 3) Configure your local app instance Actually, the way Cosmic JS hosted apps are configured is by reading environment variables, but this time to be more clear with our local deployment we just edit file called . To be able to run the app against your own Cosmic JS Bucket you will need to change next 3 attributes in this file: instance.config.js slug read_key write_key To obtain this settings go to your Bucket dashboard and navigate to . There you will see fields called: Settings > Basic Settings Bucket slug API Read Access Key API Write Access Key Copy values from those fields to your and save it. After that it should look like that: instance.config.js 4) Run the app After the app builds you will see the message saying that the server is started at its address and port. Navigate to this address with your web browser. You should see the app homepage with demo data loaded from your Bucket: Learn how data is fetched Fetching data from Cosmic JS to your JS app is pretty simple when you get used to JavaScript as an asynchronous language itself. In this particular app example we use a small factory that produces a promise which later resolves to the Bucket instance that allows us to fetch Objects from it. In you can see how it’s done: this file You can notice how Bucket initialization requires parameters that we set up prior in the configuration file. Then you can see how Bucket access is actually used in the app’s state management. Here is the simplified view of : index Vuex file Here we awaiting when promise with Bucket resolves. Then we call with type of ‘authors’, quantity limited to 1 and disabled metafields explanation. Then if the response is returned with non empty status, we pick the first-received Object and store it to our state. That’s it! getObjects If you want to look at received data more closely, you can install , then run app in development mode by command and inspect Vuex state via vue-devtools in your browser. You will see that received data tree contains not only Author object, but also related Albums and Tracks. vue-devtools “npm run dev” What about pushing data to Cosmic JS? You also can not only “read” Objects from your Bucket, but also write (create) them into it. To involve this type of operation our app allows users to post Comments regarding Albums. Look at and you will see that creating Objects with method is as simple as getting them by from Cosmic JS. next piece of code in the context of comment form addObject getObjects Conclusion Cosmic JS allows you to create data structures based on Multiple Objects Relationships and then receive this data in your app by few lines of code. If you have any comments or questions about building apps with Cosmic JS, and . reach out to us on Twitter join the conversation on Slack

How to Build a Personal Music Site powered by Cosmic JS and Nuxt.js

In this blog, I will show you how to install a deploy a Tutorials app built on Nuxt.js and Node.js. This tutorials app allows Users to sign up, add tutorials plus browse tutorials submitted by other users. The app’s content is powered by the . Check out the full tutorial below, or keep reading to deploy the app in 3 steps. Cosmic JS CMS API _In this tutorial I’m going to show you how to create a “Tutorials Portfolio” app using Nuxt.js, and Cosmic JS. For the…_hackernoon.com How to Build a Tutorials App Using Nuxt.js is an API-first CMS that makes managing and building websites and applications faster and more intuitive. By decoupling content from code, Cosmic JS empowers developer flexibility while ensuring content editors can plan and deploy content as it best suits them. We’ll be using Cosmic JS to install our example app, deploy and make content updates moving forward from the cloud-based Content Management Platform. Cosmic JS Resources _Cosmic JS is a cloud-hosted content platform that offers a flexible and intuitive CMS API. Build websites and…_cosmicjs.com Tutorials App | Cosmic JS App Demo _tutorials-app - An education platform that allows users to register, login and add tutorials._github.com cosmicjs/tutorials-app 1. Create a New Bucket 2. Install the Nuxt.js Tutorials App Once you’ve signed up and named your bucket, you’ll be prompted to start from scratch or install an app. For this blog I am installing the Tutorials App built on Nuxt.js and Node.js. 3. Deploy to Web I clicked “Deploy to Web”. I can then edit Objects while my web application is deploying. You will receive an email confirming the deployment of your web application. If you encounter any issues during deployment, you may be routed to the . Cosmic JS Troubleshooting Page Confirm Deploy Location and Branch Now that your app is deployed to Cosmic JS, you’re able to completely manage your Nuxt.js Tutorials App and all of its content from one place. is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic JS API, please reach out to the founders on or . Cosmic JS Twitter Slack is the Co-Founder & CMO of , an API-first Cloud-based that decouples content from code, allowing devs to build slick apps and websites in any programming language they want. Carson Gibbons Cosmic JS Content Management Platform

Deploy a Nuxt.js Tutorials App in 3 Steps

How to build and share a static site from scratch in 5 minutes. Install : vue-cli npm install -g vue-cli Create the project (replace by your project name): my-project vue init nuxt/starter my-projectcd my-projectnpm install Update to (replace by your project name): nuxt.config.js add a base URL my-project router: { base: '/my-project/' }, Install : push-dir npm install push-dir --save-dev Create a command to publish to by editing file and adding this line at the beginning of the section: deploy Github pages package.json script "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup", Connect to your Github account and create an empty repository. Then commit and push your code to your repository (replace by your name and by your project name): me my-project git initgit add .git commit -m "init"git remote add origin https://github.com/me/my-project.gitgit push -u origin master Generate the site and publish it: npm run generatenpm run deploy Go to your site (replace by your name and by your project name) and . https://me.github.io/my-project me my-project enjoy the result You can publish your changes by running this again: npm run generatenpm run deploy 🤗 Voilà.

Create and publish a Nuxt.js powered website on Github pages

, one of the most popular Vue frameworks, has recently released a new image optimization module, which allows developers to easily optimize images within Nuxt without having to install additional third-party libraries. Nuxt imgix is happy to be one of the first image providers to work with the new Nuxt Image Component. This article will show you some great examples of how you can set up and use these transformations with . <nuxt-img> Why Automate Image Optimization? Images constitute an average of on modern websites. They have an outsized impact on user experience and website performance. The scale and complexity of image processing are growing faster than ever as more user-generated content such as NFTs started to enter the picture. 75% of the total page weight Automating image optimization is no longer optional for any web development team for the following reasons: Images that aren’t optimized for a user’s device or browser can create a poor viewing experience and a negative perception of the website. Unoptimized images can slow down a website and hurt its SEO results. An expanding image delivery pipeline can significantly increase the bandwidth costs and the stress on the infrastructure. Why Use imgix? You might be initially wondering, why should I use , let alone use it with the Nuxt Image component? Nuxt is already including an open-source module to optimize my images. Yes, the IPX instance included with Nuxt Image is a good module to help optimize locally hosted images. imgix Here are some great reasons why you should use imgix instead: imgix empowers developers with 120+ API transformations for their images. Using an open-source image module would increase your build time with Nuxt, since the images are being processed during the build. imgix can also simplify your asset management needs. We connect to wherever your images are stored, like an Amazon S3 or GCS bucket, and we will provide a UI or API to easily organize and access those images. imgix includes global CDN delivery with a custom Fastly instance. imgix has a free plan. If you are working on a small project, you can access all the imgix features with that ! free plan This will certainly supercharge your website beyond what is initially offered with the IPX instance. Getting Started with imgix If you already have an account with imgix, move on to the Installation steps section. If you need an imgix account, you can sign up for a . Once signed up, you will need to set up a source and choose your imgix domain. Once your source is set up, you can either start serving images that are currently in your storage with your new imgix domain, or you can upload new images as well. You can find more in-depth instructions on the as well. free account here imgix setup page Installation steps In order to use the Nuxt Image Component you will need to install it in your already created Nuxt project. If you would like to see the complete installation instructions, you can view them on . Nuxt's Website In these instructions, I am assuming you already have an existing Nuxt project, or you have recently created one, that is going to be statically hosted. First, you will need to install the Nuxt Image component: npm install -D @nuxt/image Then, you need to add the newly installed to your : devDependency nuxt.config.js export default {
  target: 'static',
  buildModules: [
    '@nuxt/image',
  ]
} Then, you will need to configure an image section in the nuxt.config.js with your imgix domain: image: {
    imgix: {
      baseURL: "https://assets.imgix.net"
    }
  }, Using the Tag with imgix <nuxt-img> You can now replace tags with tags. You would select the imgix, add the image path name to the src tag, and then have the ability to add additional props to further optimize your images. <img> <nuxt-img> Here is a typical example that you can also find in the Nuxt Image documentation: <nuxt-img
  provider="imgix"
  src="/blog/woman-hat.jpg"
  width="300"
  height="500"
  fit="cover"
  :modifiers="{ auto: 'format,compress', crop: 'faces' }"
/> This would result in a 300 x 500 image, that has optimized the format depending on a browser, is automatically being compressed, and intelligently cropping to the face of the image. Here is the resulting URL: https://assets.imgix.net/blog/woman-hat.jpg?w=300&h=500&fit=crop&crop=faces&auto=format,compress Creating a Responsive Design with Nuxt Image A more complex example would be using the sizes attribute to build out a responsive design. If you would like to create an image gallery, that is set up as columns and uses a responsive design to become full width on mobile, you can actually pass this in the sizes attribute and Nuxt will generate the appropriate size image for each media width. Adding something like this would generate a responsive in an image tag: srcset <nuxt-img
  provider="imgix"
  src="/blog/woman-hat.jpg"
  fit="crop"
  sizes="sm:100vw md:100vw lg:50vw xl:33vw"
  :modifiers="{ auto: 'format,compress', crop: 'faces,edges', ar: '1:1' }"
/> A good tip here, even though my small and medium sizes are going to both be 100vw, you should enter them both. The more size options you add, the more sizing options that will be available in your resulting srcset. Also remember, with imgix, you have an unlimited amount of renders with all of your images, so there is no reason why you shouldn't include many resizing options to ensure you always have the best size image being loaded on your website. You might have noticed some additional items that I included in the modifiers compared to my first example. I added an to the modifier. This will crop all of my images to a square. You might at first be concerned that I am going to crop all of my images. I have actually also modified my crop request to be . ar: 1:1 faces,edges So if an image is not a square and I end up cropping portions of the image, I will ensure that I do not crop out any faces. If there are no faces, then the image will focus on the prominent edges in the picture as well. Here is an example of the resulting image tag from the above : nuxt-img <img 
  src="https://assets.imgix.net/blog/woman-hat.jpg?auto=format,compress&amp;crop=faces&amp;ar=1:1&amp;w=397&amp;fit=crop"
  sizes="(max-width: 640px) 98vw, (max-width: 768px) 98vw, (max-width: 1024px) 49vw, 31vw"
  srcset="https://assets.imgix.net/blog/woman-hat.jpg?auto=format,compress&crop=faces,edges&ar=1:1&w=627&fit=crop 627w, https://assets.imgix.net/blog/woman-hat.jpg?auto=format,compress&crop=faces,edges&ar=1:1&w=753&fit=crop 753w, https://assets.imgix.net/blog/woman-hat.jpg?auto=format,compress&crop=faces,edges&ar=1:1&w=502&fit=crop 502w, https://assets.imgix.net/blog/woman-hat.jpg?auto=format,compress&crop=faces,edges&ar=1:1&w=397&fit=crop 397w"
> You can see that it has generated four different versions in the , each with a different size. This allows the browser to choose an image that is closest to the rendered resolution of the image. This helps to ensure you have many image options to be loaded for a good responsive design. srcset Furthermore, since we are using , imgix will automatically choose the best image format based on the viewer's browser. auto=format Tutorial In this tutorial, I am going to be creating a simple image gallery in a Nuxt project. I will also be using Tailwind CSS and deploying this site on Vercel. The image gallery will be a flex design, with 3 columns on the largest screen sizes, 2 columns on the smaller desktop sizes, and 1 column on mobile sizes. The images will be using the Nuxt Image component and will contain a responsive design. If you would like to skip the tutorial and go right to the code, you can see that on . Github Please start by and then installing the Nuxt Image Component as I explained at the beginning of this blog. When initiating the Nuxt project, I would suggest choosing Tailwind CSS, since my examples will be using this module for CSS. initiating a Nuxt project Once that is all set up, go to your index.vue file in your pages folder. Erase what is currently there and start fresh with a div tag. Like this: <template>
  <div>
  </div>
</template> You can add some sections for a headline and text at the top of your page. Here is an example of adding this with some Tailwind CSS: <template>
  <div>
    <h1 class="title-font sm:text-4xl text-3xl m-4 font-medium text-gray-900">Example using the Nuxt Image Component</h1>
    <p class="m-4 leading-relaxed">Optimize your images with imgix in your Nuxt Image Component.</p>
  </div>
</template> Next, we can focus on adding a flex div to include your images and the tag. nuxt-img <template>
  <div>
    <h1 class="title-font sm:text-4xl text-3xl m-4 font-medium text-gray-900">Example using the Nuxt Image Component</h1>
    <p class="m-4 leading-relaxed">Optimize your images with imgix in your Nuxt Image Component.</p>
    <div class="flex flex-wrap">
      <nuxt-img
        provider="imgix"
        src=""
      />
    </div>
  </div>
</template> Now we can add as many images inside of the flex div as we would like for our gallery. For the next code example, I will focus on just the tag. <nuxt-img /> <nuxt-img
  class="float-left p-2 m-auto w-full lg:w-1/2 xl:w-1/3 2xl:w-1/3"
  provider="imgix"
  src=""
  sizes="xs:98vw sm:98vw md:98vw lg:49vw xl:31vw 2xl:31vw"
  fit="crop"
  :modifiers="{ auto: 'format,compress', ar: '1:1' }"
/> I have included in 2 places info about the sizing that will help my responsive design. First, in the class section. Again, just a reminder, this is an example of using Tailwind CSS. If this is your first time encountering it, I really do suggest checking out their . On XL and 2XL size screens, the images will be viewed in css at 33% the size of the screen. documentation Between 1024 px and 1280 px size screens, the images will be viewed in css at 50% the size of the screen. Then any screen smaller than 1024px wide will be viewed at 100% the size of the screen. I have also replicated this same idea in the attribute, which tells the Nuxt Image Component to generate resized versions for each of these scenarios. sizes Now, you can go ahead and create as many of these tags as you need for your gallery. If you are going to pass image URLs from data or an API, you can easily use the v-for attribute as well. I do believe this is one of the more powerful aspects of Nuxt, so I will go ahead and add 6 image names in my Data section and pass them as a v-for. This could also be a great time to use the Image Management solution included with your imgix account to find the appropriate images you would like to use. <nuxt-img> For my list of images, they are conveniently named 1 through 6, so I will place them in my section of my : script index.vue <script>
export default {
  data() {
    return {
      images: [
        '/artsy/1.jpg?',
        '/artsy/2.jpg?',
        '/artsy/3.jpg?',
        '/artsy/4.jpg?',
        '/artsy/5.jpg?',
        '/artsy/6.jpg?'
      ]
    }
  }
}
</script> I can now access these images using a v-for in my . In order to do that, here is how I am modifying my tag: <nuxt-img> <nuxt-img
  class="float-left p-2 m-auto w-full lg:w-1/2 xl:w-1/3 2xl:w-1/3"
  v-for="(image, index) in images"
  :key="index"
  provider="imgix"
  :src="image"
  sizes="xs:98vw sm:98vw md:98vw lg:49vw xl:31vw 2xl:31vw"
  fit="crop"
  :modifiers="{ auto: 'format,compress', ar: '1:1' }"
/> This will loop through my 6 images, creating a responsive img tag for each of them in my gallery. This is a rather simple idea of using a v-for, but hopefully gives you the idea of how quickly this can be used on a large number of images. Deploying Your Nuxt Project I will be pushing this project up to Github using Github Desktop. Once you have pushed your project to Github, you can then deploy it. For this example, I will be using Vercel. One thing I do to ensure my Vercel builds go smoothly with Vercel is to create a vercel.json file and add a builds section. Mine looks like this: "builds": [
        {
          "src": "nuxt.config.js",
          "use": "@nuxtjs/vercel-builder",
          "config": {}
        }
    ] If you would like to go one step further with an advanced item the Vercel works well with, it would be setting up on these images. Client Hints will tell imgix the exact width and dpr of an image in a Chrome browser, allowing imgix to provide the perfect size every time. This solution only works with Chrome browsers, but it's a great item to still use in conjunction with another responsive set up like this. Client Hints If you look at the documentation, you might notice a warning about Chrome not supporting sending Client Hints to third-party origins. Well Vercel solves that by confirming the routes and feature policy in the vercel.json file, so it is no longer a third-party origin. Here is what you add to to vercel.json file: "routes": [
  {
    "src": "/*",
    "headers": {
        "Accept-CH": "DPR, Width, Viewport-Width",
        "Feature-Policy": "ch-dpr https://assets.imgix.net 'self'; ch-width https://assets.imgix.net 'self'; ch-viewport-width https://assets.imgix.net 'self'"
      }
  }
] In the place of the imgix domain I am using for this example, enter your imgix domain. Finally, I used the Vercel for Github integration, which quickly launches my website from an repos in my Github account. Here is a link to the completed page: https://nuxt-image.vercel.app/ Conclusion This is a pretty simple tutorial example of how you can use imgix with the new Nuxt Image Component, but I hope it has been helpful for you. It is a really simple way to create a responsive design directly inside Nuxt while also getting access to a very powerful image solution from imgix. If you would like to see more advanced versions of this tutorial, or possibly examples from other data sources like a headless CMS or other API, we would love to hear all of your requests. Please don't hesitate to reach out to us on . Twitter To learn more about imgix, check out our or . documentation try it free Also published . here

Automatic Image Optimization Using the Nuxt Image Component with imgix

Having a blog to write and share our knowledge on the internet is essential for visibility and making us known in our field as an authority on a subject. This article will teach you how to build a blog that has dynamic pages for each article. Table of Contents Prerequisites Getting Started What is Nuxt? What is Nuxt Content? What is Cloudinary? Creating a Blog with Nuxt Creating the Blog Notes Fetching the Posts Creating Dynamic Pages Final Thoughts Learn More To follow along, view the codebase and its repo on and the for reference. GitHub demo Prerequisites The following are required to complete this tutorial: Cloudinary account. is free Sign up Basic knowledge of JavaScript Familiarity with Vue Getting Started To get started, open up the terminal and run the command: npx create-nuxt-app blog-for-developers The command above will kick off a command-line interface (CLI) prompt that will allow us to configure various aspects of our project. Now that the boilerplate is set up with all the files and folders, let’s run the development server which is accessible on inside the project. http://localhost:3000 # change directory to project folder cd blog-for-developers # start the development environment npm run dev NuxtJS is an open-source intuitive Vue framework that allows us to build user interfaces, making web development simple and powerful. What is Nuxt? During the initial setup of this project, we selected the Nuxt content module. This module lets us use our codebase as a Git-based headless CMS to access markdown, JSON, YAML, XML, and even CSV files through an API-like interface. With this module , it will inject the instance globally in our project to access it anywhere in a project. What is Nuxt Content? @nuxt/content $content Cloudinary is a cloud-service image and video management tool for web and mobile applications. With Cloudinary, we can upload, create, and manage digital experiences across any browser and device. What is Cloudinary? Creating a Blog with Nuxt Before we create the content for the blog in markdown using Nuxt content, let’s first create the landing page for the blog that will include the navigation links and some text. In the , we can add our favorite font to the head section and use a particular font family as seen below: Add Font Style nuxt.config.js file The above code block will have no effect on the page until we write the CSS that will use the font. Now, add the following code to the which will include the navigation links and some text on the home page. Remove the component, . pages/index.vue <Tutorial /> <template> <section class =" showcase "> < header > < h2 class =" logo "> < nuxt - link to ="/"> ecosurf </ nuxt - link > </ h2 > < nav class =" nav desktop "> < ul > < li class =" nav__list "> < nuxt - link to ="/ blogs "> Stories </ nuxt - link > </ li > </ ul > </ nav > </ header > < video autoplay loop muted src =" https: // res . cloudinary . com / terieyenike / video / upload / v1651393236 / mixkit - tropical - island - landscape - view - 4692 - large_yanvml . mp4 "></ video > < div class =" overlay "></ div > < div class =" text "> < h2 data - type =" uppercase " class =" stroke "> Never Stop </ h2 > < h3 data - type =" uppercase "> Exploring The World </ h3 > < p > View of the tropical island landscape, from a hill with houses, palm trees and many trees, and in the distance the hills that surround the sea, on a sunny day . </ p > </ div > < ul class =" social "> < li > < a href =" https: // twitter . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" twitter profile " src =" https: // i . ibb . co / Wnxq2Nq / twitter . png "/></ a > </ li > < li > < a href =" https: // instagram . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" instagram profile " src =" https: // i . ibb . co / ySwtH4B / instagram . png "/></ a > </ li > </ ul > </ section > </ template > In the above code block, we included a with the source of the video stored in Cloudinary with attributes such as autoplay, loop, and muted that mute the video when it loads. To obtain the media stored in Cloudinary, we upload our desired video to the media library tab. Thereafter, copy the URL which will be attached to the of the . <video> src <video> Also, we referenced the links in the navigation header with the component to both the home and the routes which we will create to view all our blogs. To make sure our page is styled with CSS, create a folder at the root of the project, , and include the following from this . In the file, update the file to include the created CSS file with the following: nuxt-link / /blogs assets/styles/main.css gist nuxt.config.js ... ...
 } export default { css : [ '@/assets/styles/main.css' ], Here is what our page should look like: Creating the Blog Notes To build our blog site, we need to have content to display and render on the page. First, create a directory and then the blog directory that will contain all the markdown files. Writing all the content in markdown supports a lot of the markdown syntax standards such as the headings, links, and code blocks with syntax highlighting for different programming languages. PS: The Nuxt content utilizes the content folder to store all the files. Here’s an example of a markdown file in the content directory. Add the following to the file . /blogs content content/blogs/egghead.md title: Egghead author: Teri Eyenike
    description: All we need to do is open up our terminal and run the command npm install @nuxt/content. Once it's installed, you'll see that inside of our package.json, we see our Nuxt Content module. Next, to finalize the setup, let's go ahead and open up our nuxt.config.js, and let's go ahead and scroll down to the section that's labeled Modules.
    date: May 2, 2021
    publishOn: 2021-05-02T00:00:00
    tags: ["learning", "platform"]
 --- --- cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills!  Markdown files have the ability to add metadata using the concept of front matter which is denoted with the triple-dash syntax at the start and stop of the front matter. The metadata, is what is displayed to readers like the time of publication and excerpt of the blog content, is what is displayed to readers. Other various properties can be included. PS: Inside of the front matter, it uses the YAML syntax. To fetch the posts for the blog page, let’s create a new route under . Create a folder, called blogs, and in there create file for the directory, blogs. Next, copy and add the following code to the file to display the rendered markdown files. Fetching the Posts pages index.vue pages/blogs/index.vue <template> </template> // pages/blogs/index.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container section" > < div class = "container__grid" > < div v-for = "blog in blogs" :key = "blog.slug + blog.createdAt" class = "card" > < img :src = "blog.cover_image" alt = "blog photographs" /> < div class = "pad__card" > < div class = "author" > < p class = "author__name" > {{ blog.author }} </ p > < span > | </ span > < p > {{ blog.date }} </ p > </ div > < h2 class = "title" > {{ blog.title }} </ h2 > < p > {{ blog.description.substring(0, 150) }}... </ p > < button > < nuxt-link :to = "`/blogs/${blog.slug}`" > Read More </ nuxt-link > </ button > </ div > </ div > </ div > </ div > </ main > < script > export default { async asyncData ( {$content} ) { const blogs = await $content( "blogs" ).sortBy( "publishOn" , "desc" ).fetch() return { blogs } }, head ( ) { return { title : "Read interesting stories as a nomad" , meta : [ { hid : 'description' , name : 'description' , content : 'Daily and juicy content as you learn, work, and relax. WFH' } ] } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } .section { padding : 3em 0 ; } .container__grid { display : grid; gap: 2em ; grid-template- columns : repeat (auto-fit, minmax ( 19rem , 1 fr)); } .card { background : #f0f7f4 ; box-shadow : 0px 4px 3px rgba ( 0 , 0 , 0 , 0.1 ); border-radius : 5px ; } .card img { object-fit : cover; border-top-left-radius : 5px ; border-top-right-radius : 5px ; width : 100% } .pad__card { padding : 2em ; } .author { display : flex; align-items : center; } .author , .title { margin-bottom : 1em ; } .author span { margin : 0 0.3em ; } .author__name { text-transform : capitalize; } button { border : unset; padding : 1em 2em ; margin-top : 2em ; background : #0D5159 ; font-weight : 700 ; cursor : pointer; } button a { color : #fff ; } </ style > The code block above does the following: : used to generate our page from Nuxt as it generates individual files statically to users. We pass in the method where the blog notes are stored, the function, and the method. asyncData $content sortBy() fetch : takes two parameters, (sort it by date) and the desc attributes on how you want the content to appear based on the most recent content published sortBy() publishOn To make each blog article dynamic, we will assign it to a URL, where it’s the blog slug on the Read more button using the component. /blogs/ <nuxt-link> The last step for viewing the snippet of the rendered posts from the content directory is to use the v-for directive and loop over the blogs and render each article in a card. Rendering the posts Here is what the blog page should look like now: Creating Dynamic Pages Now let’s create pages for each blog post to have dynamic URL routes. In Nuxt, to create dynamic pages, we append an underscore before the .vue file name so as not to make the URL hardcoded. We then create the file under the blogs directory and add the following code: _slug.vue <template> </template> // pages/blogs/_slug.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container" > < div class = "return" > < nuxt-link to = "/" > < img alt = "back to home" src = "/home.png" /> </ nuxt-link > < span > / </ span > < nuxt-link to = "/blogs" > Blog </ nuxt-link > < span > / </ span > < p > {{ note.title.substring(0, 15) }}... </ p > </ div > < section > < h1 > {{ note.title }} </ h1 > < nuxt-content :document = "note" cla /> </ section > </ div > </ main > < script > export default { async asyncData ( {$content, route} ) { const note = await $content( `blogs/ ${route.params.slug} ` ).fetch() return { note } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } section { padding-bottom : 2em ; } .return { display : flex; margin : 1.5em 0 ; } .return img { width : 20px ; height : 20px ; } .return span { margin : 0 1em ; } h1 { margin-bottom : 1em } </ style > This block of code does the following: : We use the content to fetch a specific file from the directory blogs using the route parameter and the slug which will map to our actual file name ${route.params.slug} To render the markdown as actual content defined in the markdown file, we use the nuxt-content component and pass the prop of the with the entire object document note : Defining the scoped to the style element make sure that the styling only applies to a specific page scoped Final Thoughts The creation of a blog is great when you want to share your thoughts with a wider audience and Nuxt has provided us with a way to do so in this article. There are still other features we can still explore to make sure we have a robust blog website. Learn More Nuxt content Nuxt documentation Try out the live demo

How to Build Your Own Blog with Nuxt, Nuxt Content, and Cloudinary

Cómo crear su propio blog con Nuxt, Nuxt Content y Cloudinary

Comment créer votre propre blog avec Nuxt, Nuxt Content et Cloudinary

Nuxt, Nuxt Content और Cloudinary के साथ अपना खुद का ब्लॉग कैसे बनाएं

Nuxt、Nuxt Content、および Cloudinary を使用して独自のブログを作成する方法

Como construir seu próprio blog com Nuxt, Nuxt Content e Cloudinary

Cách tạo Blog của riêng bạn với Nuxt, Nội dung Nuxt và Cloudinary

如何使用 Nuxt、Nuxt 内容和 Cloudinary 构建自己的博客

If you are reading this article on , then you will be prompted to pause your adblocker if you are using one. If you are using an ad blocker, I recommend that you consider installing one. briancaffey.github.io/2021/10/31/how-and-why-i-added-adsense-and-adblock-detector-to-my-website not Reading this article on a browser with AdBlock enabled will allow you to see how I detect AdBlock and ask people to pause it when they are on my site. This article is a deep dive on how I added ads to my site with Google AdSense and how I request that visitors to my site pause AdBlock so that I can make more money from Google AdSense. How I Added AdSense to My Site I have been enjoying using my GitHub Pages website to learn more about static sites, JAMStack, and Nuxt.js, an awesome Vue.js framework with support for building statically generated sites. I have been able to learn and implement several different features which I have written about on my blog. Some examples include: Adding a Drift chat window so users can message me directly Implementing a contact form with formsubmit.io Using Vue.js components in Markdown files to add interactive elements to my articles (such as graphs) Adding a custom MailChimp newsletter sign-up form that is included in the footer of each page of my blog Adding an RSS feed for my blog Adding a site index and submitting it to Google I have also been learning the suite of Google tools for monitoring and measuring traffic to my site, including Google Analytics and Google Search Console. Google Search Console is helpful for understanding the search terms that people are using when searching Google that result in organic traffic to my site. At one point I found out that another website was using the same Google Tracking code that I had previously hard-coded into an old version of my website, and my Google Analytics started measuring traffic to URLs that I didn't recognize as belonging to my site. I was able to fix this by adding a Hostname filter rule in Google Analytics. One area that I have not had any experience with until recently is Google AdSense. Google AdSense allows you to place ads on your website. Here's an overview of what I did to get started: Add a site in Google AdSense Submit my site for approval (this takes a few days) Install and configure the Google AdSense plugin for NuxtJS Add the file generated by Google AdSense to my site ads.txt Confirm my address by entering a code that was mailed to me Connect a bank account to my Google AdSense account Here's the address confirmation code that I received from Google: Here's the config code for AdSense from : nuxt.config.js /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt/content
    '@nuxt/content',
    // Doc: https://www.npmjs.com/package/@nuxtjs/sitemap
    '@nuxtjs/sitemap',
    '@nuxtjs/feed',
    'nuxt-i18n',
    ['@nuxtjs/google-adsense', {     <-- AdSense config
      id: 'ca-pub-4924597640144289'
    }]
  ], The process was pretty simple. Google now automatically places ads on my site in a few different formats: ads displayed on the top and bottom of the page popup ads displayed between route navigation ads automatically inserted into the body of the page between paragraphs in my articles ads that I place on articles explicitly using the Vue component <adsbygoogle /> When everything was set up properly I started seeing ads on my site, and I see a non-zero value in my estimated earnings in the AdSense console. Google has a payment threshold of $100, so I need make this amount before I can start receiving money from Google. My estimated earning report shows that I make between $0 and $4.32 in ad sales per day. I'm interested to see how much I can make with an article that I post across the many different channels that I can publish to. I explored this in a previous article, but the main channels I can use for sharing content are: DEV.to Facebook Hashnode Medium Reddit Discord Hacker Noon Twitter My MailChimp mailing list Substack Hacker News This article should be a good place to start exploring how effective the different channels are in driving content to my site, and I'll update this article later with more details and numbers from my AdSense reports. How I Built an AdBlock Detector for My Site I assume that most people reading my blog have an AdBlock extension installed in their browser like I do, such as AdBlock or ABP (AdBlock Pro). This got me thinking about how I could implement a simple AdBlock detector for my site that would hide the contents of the page if AdBlock is enabled. How do you Check to See if AdBlock is Enabled? I started with this question, and I came across which inspired the code that I am now using on this site to detect AdBlock. this StackOverflow question The components of my AdBlock detector There are a few different parts of my Nuxt Application that work together to detect if AdBlock is active and request that the user pause AdBlock for the site. The main components are: A component called AdBlockBlocker This component is used in the default layout, so it is included in all pages on briancaffey.github.io Vuex store module called adblock this module is used to keep track of a boolean value that indicates if AdBlock is enabled the module also has a simple getter and a mutation for turning adBlock to true or false Some logic in the layout that is used for almost all of the pages on my site default.vue the getter from the Vuex store is used here to either show regular content or a message that the user needs to pause AdBlock A component/page to display when AdBlock is enabled this component asks the user to please pause AdBlock I named this component PleaseDisableAdblock.vue localStorage: this is used to keep track of the presence of an AdBlocker that is blocking ads Here's an overview of each part: AdBlockBlocker.vue This is the key part of how the AdBlock detection works. If the client is unable to download the file, then that indicates that the user is using AdBlock. adsbygoogle.js <template>
  <div />
</template>

<script>
export default {
  mounted () {
    // if adblock is detected through a value that is set local storage, then show the AdBlock message
    // the `adblockEnabled` value is set in the catch block of the `detectAdBlock` method
    // (see adblock/setAdblockEnabled mutation)
    if (JSON.parse(localStorage.getItem('adblockEnabled')) === true) {
      this.$store.commit('adblock/setAdblockEnabled', true)
    }
    // check to see if the URL can be accessed on a 5 second interval
    setInterval(() => {
      this.detectAdBlock()
    }, 5000)
  },
  methods: {
    async  detectAdBlock () {
      // this is a URL that should be blocked by AdBlock
      const googleAdUrl = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
      // make a request to the above URL
      await fetch(new Request(googleAdUrl)).then((_) => {
        // isAdblockEnabled is false by default
        // Check to see if isAblockEnabled was set to true by a previous request
        if (this.$store.getters['adblock/isAdblockEnabled'] === true) {
          // if the request was successful, then the user does not have AdBlock enabled,
          // so we can set isAdblockEnabled to false using the setAdblockEnabled mutation
          // this mutation will also set the `adblockEnabled` value in local storage to "false"
          // `adblockEnabled` be `JSON.parse`d since it is saved in localStorage as a string
          this.$store.commit('adblock/setAdblockEnabled', false)
          window.localStorage.setItem('adblockEnabled', 'false')
          // do a full reload of the page
          window.location.reload()
        }
      }).catch((_) => {
        // if the request was unsuccessful, then the user has AdBlock enabled.
        // we can set isAdblockEnabled to true using the setAdblockEnabled mutation
        // this will also set the `adblockEnabled` value in local storage to "true"
        this.$store.commit('adblock/setAdblockEnabled', true)
        window.localStorage.setItem('adblockEnabled', 'true')
      })
    }
  }
}
</script> One other important point about this component is that it runs AdBlock detection using , meaning that it will check if AdBlock is enabled every few seconds while a user is on my site. setInterval If AdBlock is enabled, the request will fail and the Vuex store value will be updated, which will cause the site to display the component. PleaseDisableAdblock.vue If AdBlock is not enabled, then the file will be read from the disk cache and the Vuex store value will remain . false Vuex Store This is a very simple Vuex store module. The getter will be used in the layout component. isAdblockEnabled default.vue let initialValue = false

if (process.window) {
  initialValue = JSON.parse(window.localStorage.getItem('adblockEnabled')) || false
}
export const state = () => ({
  adblockEnabled: initialValue
})

export const getters = {
  isAdblockEnabled: state => state.adblockEnabled
}

export const mutations = {
  setAdblockEnabled (state, payload) {
    state.adblockEnabled = payload
  }
} default.vue layout logic <template>
  <div>
    <Navigation />
    <PleaseDisableAdblock v-if="$store.getters['adblock/isAdblockEnabled']" />
    <Nuxt v-else />
    <AdBlockerBlocker />

    <Footer />
  </div>
</template> Content to show to request that a user pauses AdBlock When a user has AdBlock enabled, I show a simple message that asks them to please disable AdBlock. I also want to invite people who do not wish to disable AdBlock to read my blog directly on GitHub, or to read it without ads by cloning or forking my repo, building it, and running it in development mode with . yarn dev Why I am Adding Ads and an AdBlock Detector to My Site Being asked to pause AdBlock is increasingly common. I have noticed that the experience is not the same on each site that requests AdBlock be paused. For example: a site might ask you to pause AdBlock, but you have the option to continue without pausing AdBlock a site shows you a preview of an article and asks you to unpause AdBlock to see the full article all site content is hidden if you are using AdBlock, and a pop-up message ask you to "Continue to site" once you have paused AdBlock. I remember being able to delete AdBlock detection modals and backgrounds on some sites as a way of getting around ad-block detectors. This is as easy as , click on the element that is blocking the page content and the selected element. Cmd + Shift + C delete One of the reasons I wanted to implement AdBlock detection is to see what is possible from the perspective of user experience (UX). Ideally, here's how I want the "please disable AdBlock" experience to work on my site: A user visits my site with AdBlock enabled For a few seconds, the user can start reading the content of the article The page content is replaced with a message that says "Please disable AdBlock" and some other links that people may find interesting or helpful. The user goes into the AdBlock extension and pauses AdBlock on my site The original page content is then displayed with ads If the user re-enables AdBlock shortly after pausing it, then the "Please disable AdBlock" message should be displayed again I don't want to ask the user to press a button or make the user think that they need to refresh the page. This is why I'm using , I continuously make requests to the Google Ads JavaScript file that will be used to detect if AdBlock enabled. setInterval I'm happy to pause my AdBlock for smaller sites that ask me to, or for newspaper sites that are supported by advertising, and I'm assuming that people visiting my site will also be OK with pausing AdBlock as a way of thanking me for the work that goes into what I share on my blog. I'm mostly curious to see what happens to my site's traffic, and to see what impact it could have on the earnings I make from AdSense. Some of my questions are: What will happen to the bounce rate if I request that AdBlock users pause AdBlock for my site? What is the most effective amount of time to wait before requesting that a new user pause AdBlock for my site What else can I include on my "Please Disable AdBlock" page to encourage new users to pause AdBlock on my site? I'll have a good follow-up article to share with numbers from my AdSense and Google analytics. One small issue While ads are working on my site, I did notice a console error related to AdSense: K {message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.", name: 'TagError', pbr: true, stack: "TagError: adsbygoogle.push() error: Only one 'enab…agead/js/adsbygoogle.js?client=ca-google:77:1130)"}
message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page."
name: "TagError"
pbr: true
stack: "TagError: adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.
    at go (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:219:326)
    at fo (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:218:788)
    at mo (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:225:365)
    at c (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:226:38)
    at no (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:226:156)
    at yo (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:235:248)
    at oo (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:232:89)
    at http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:227:47
    at Od.aa.ma (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:64:802)
    at Jf (http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-google:77:1130)" Here's a related issue on GitHub: . I'm still not sure how to fix this issue. If anyone has any ideas, please let me know! https://github.com/nuxt-community/google-adsense-module/issues/141 This article was first published here

NuxtJS News on
HackerNoon and Around the Web

Winner for Best Startup in Bordeaux, Western Europe!

nuxtjs.org

-- employees

Since n.d.

NuxtJS Story Mentions

Articles Around the Web

Read More Tech Stories Related to #NuxtJS

NuxtJS News on HackerNoon and Around the Web