Vue server

Vue server DEFAULT

Using Vue in Visual Studio Code

Vue.js is a popular JavaScript library for building web application user interfaces and Visual Studio Code has built-in support for the Vue.js building blocks of HTML, CSS, and JavaScript. For a richer Vue.js development environment, you can install the Vetur extension which supports Vue.js IntelliSense, code snippets, formatting, and more.


welcome to Vue


Welcome to Vue

We'll be using the Vue CLI for this tutorial. If you are new to the Vue.js framework, you can find great documentation and tutorials on the vuejs.org website.

To install and use the Vue CLI as well as run the Vue application server, you'll need the Node.js JavaScript runtime and npm (the Node.js package manager) installed. npm is included with Node.js which you can install from Node.js downloads.

Tip: To test that you have Node.js and npm correctly installed on your machine, you can type and .

To install the , in a terminal or command prompt type:

This may take a few minutes to install. You can now create a new Vue.js application by typing:

where is the name of the folder for your application. You will be prompted to select a preset and you can keep the default , which will use Babel to transpile the JavaScript to browser compatible ES5 and install the ESLint linter to detect coding errors. It may take a few minutes to create the Vue application and install its dependencies.

Let's quickly run our Vue application by navigating to the new folder and typing to start the web server and open the application in a browser:

You should see "Welcome to your Vue.js App" on http://localhost:8080 in your browser. You can press Ctrl+C to stop the server.

To open your Vue application in VS Code, from a terminal (or command prompt), navigate to the folder and type :

VS Code will launch and display your Vue application in the File Explorer.

Vetur extension

Now expand the folder and select the file. You'll notice that VS Code doesn't show any syntax highlighting and it treats the file as Plain Text as you can see in the lower right Status Bar. You'll also see a notification recommending the Vetur extension for the file type.

vetur extension recommendation

The Vetur extension supplies Vue.js language features (syntax highlighting, IntelliSense, snippets, formatting) to VS Code.

vetur extension

From the notification, press Install to download and install the Vetur extension. You should see the Vetur extension Installing in the Extensions view. Once the installation is complete (may take several minutes), the Install button will change to the Manage gear button.

Now you should see that is a recognized file type for the Vue language and you have language features such as syntax highlighting, bracket matching, and hover descriptions.

vue language features

IntelliSense

As you start typing in , you'll see smart suggestions or completions both for HTML and CSS but also for Vue.js specific items like declarations (, ) in the Vue section:

Vue.js suggestions

and Vue properties (, ) in the section:

Vue.js JavaScript suggestions

Go to Definition, Peek definition

VS Code through the Vue extension language service can also provide type definition information in the editor through Go to Definition (F12) or Peek Definition (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)). Put the cursor over the , right click and select Peek Definition. A Peek window will open showing the definition from .

Vue.js peek definition

Press Escape to close the Peek window.

Hello World!

Let's update the sample application to "Hello World!". In replace the HelloWorld component custom attribute text with "Hello World!".

Once you save the file (⌘S (Windows, Linux Ctrl+S)), restart the server with and you'll see "Hello World!". Leave the server running while we go on to learn about Vue.js client side debugging.

Tip: VS Code supports Auto Save, which by default saves your files after a delay. Check the Auto Save option in the File menu to turn on Auto Save or directly configure the user setting.


hello world


Linting

Linters analyze your source code and can warn you about potential problems before you run your application. The Vue ESLint plugin (eslint-plugin-vue) checks for Vue.js specific syntax errors which are shown in the editor as red squigglies and are also displayed in the Problems panel (View > Problems⇧⌘M (Windows, Linux Ctrl+Shift+M)).

Below you can see an error when the Vue linter detects more than one root element in a template:

Vue linting

Debugging

You can debug client side Vue.js code with the built-in JavaScript debugger. You can learn more from the Vue.js debugging in VS Code recipe on the VS Code debugging recipes site.

Note: There are currently issues with the sourcemaps generated by vue-cli, which cause issues with the debugging experience in VS Code. See https://github.com/vuejs/vue-loader/issues/1163.

Another popular tool for debugging Vue.js is the vue-devtools plug-in.

Other extensions

Vetur is only one of many Vue.js extensions available for VS Code. You can search in the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)) by typing 'vue'.

Vue.js extensions

There are also Extension Packs which bundle extensions that other people have found useful for Vue.js development.

Vue.js extension pack

10/7/2021

Sours: https://code.visualstudio.com/docs/nodejs/vuejs-tutorial

Adding server-side-rendering to existing vue 3 project

In this article we will see how to add server side rendering support to existing vue 3 project.I will be using one of my existing vue3 & vuex project which is available in github.

First we have to add few dependencies && devdependencies so that our project can support ssr

NOTE: upgrading vue to latest version so that we can use onServerPrefetch lifecycle hook

for server-side-rendering we will have to create two different entry points(files) one, which will be used in server & another in client side also we will need to different build commands for server/client, lets add these two first in package.json scripts section

we have added a flag which would help us for bundling server side and ignore any window logics as those won't work in server-side.There will be two separate directory within dist folder client && server having separate code.

With build scripts ready lets move to entry files of server side & client side, we will have a common file which will be included in both entry files &&

Lets create main.ts, we have to take care of createApp && createSSRApp for respective entry points.we can make use of flag or check

At the end our file would look something like this

With the main crux ready lets create entry-client.ts && entry-server.ts

In server entry file, we are just exporting app,router,store which would be used while serving via express

window.INITIAL_DATA will hold the initialData that would be prefetched in server-side and would be stored in global window object, then in clientSide we will use this data to populate our store on first load.

Now,lets move to webpack config part of SSR, to work with webpack we have to create a vue.config.js file. we would include webpack-manifest-plugin,webpack-node-externals,webpack

Lets add config, i will be using export.chainWebpack directly to modify default webpack config provided by vue

based on which build is going to run we have added different entry points, for this we will use flag.

Now we have to add few more code so that webpack can build server-side bundle properly.we have to set target to node && libraryFormat to commonjs2 since this file is going to run via express

you can read more about this configuration on this SSRbuildConfig

the last part is to create an server.js file which we will run on server via express.

we will be using above code which will intercept all request to our server.

this is where we use manifest.json file to select appropriate server file that would be served from express, contents of this json file is an object which has mapping for specific bundles

above mentioned code will be used to match url-page properly with router.push, then renderToString will output everything as string which would be served from express.

In the above you can see variable holds the entire content that will be served from express to browser, next step would be to add support for meta-tags.

After all these configuration, now our pages can be rendered from server, now we will use axios to fetch data from endpoint which can rendered from server

The above code is an example of how can we fetch data for server-side rendering, we have used lifecycle method to fetch data && for client side we are using onMounted hook incase data is not available in window from server.

Note: I have skipped few steps while explaining, all code regarding this article is present at Repository.

Resources which helped me to create this article are
https://v3.vuejs.org/guide/ssr/introduction.html#what-is-server-side-rendering-ssr
youtube

Sours: https://dev.to/shubhadip/adding-server-side-rendering-to-existing-vue-3-project-53oo
  1. Crenshaw hoodie
  2. Large glass desks
  3. Sprout synonym
A landscape image

Learn

Easy to learn. Easy to master

Learn everything you need to know, from beginner to master.

Start learning

A landscape image
A landscape image

Features

Intuitive Developer Experience

Nuxt is shipped with plenty of features to boost developer productivity and the end user experience.

A Zero Configuration image

Zero Configuration

Start coding your app right away, Nuxt takes care of the rest.

A File-system Routing image

File-system Routing

Automatic routing and code-splitting for every page.

A Rendering Modes image

Rendering Modes

Switch between static-site generation or on-demand server rendering.

A Data Fetching image

Data Fetching

Fetch your content from any source in your Vue components, SSR ready.

A Strong Conventions image

Strong Conventions

Efficient teamwork with a strong directory structure and conventions.

A SEO Friendly image

SEO Friendly

Meta tag management and faster time-to-content for great indexing.

A Components Auto-import image

Components Auto-import

Use your components, Nuxt will import them with smart code-splitting.

A Modules Ecosystem image

Modules Ecosystem

Extend your app with 160+ Nuxt modules and create your own.

Partners

Sustainable Development

Nuxt development is carried out by passionate developers, but the amount of effort needed to maintain and develop new features is not sustainable without proper financial backing. We are thankful for our sponsors and partners, who help make Nuxt possible.

Sponsor Nuxt

A landscape image

Community

Sharing is Caring

Discover articles from the framework team and community about Nuxt. Tips and tricks included!

  • Nuxt Static Improvements
    Announcements

    Nuxt Static Improvements

    With Nuxt version 2.13, the full-static mode has been introduced. In addition, a new command nuxt export was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... until now.

    Get infos
  • Nuxt + Strapi + Composition API
    Events

    Nuxt + Strapi + Composition API

    In this session, Alexander builds the fitting frontend for a Strapi CMS backend by leveraging the Composition API and ensure it is performant and fast. Get insights into the world of Vue and Nuxt, useful patterns for the Composition API and possibly some sneak peaks

    Get infos
A landscape imageA landscape image

Community

Testimonials

Learn what the experts love about Nuxt.

Sours: https://nuxtjs.org/
Vue JS Crash Course 2021

vue 3 Server Side Rendering with Vuex and Router

I have managed to find the solution to this thanks to the following resources:

client entry file (src/main.js)

server entry file (src/main-server.js)

src/app.js

server.js

vue.config.js

used to specify the webpack build things

src/router/index.js

src/store/index.js

Github sample code

I found I needed to go through the building the code step by step doing just SSR, just Router, just Vuex and then put it all together.

My test apps are in github

https://github.com/se22as/vue-3-with-router-basic-sample

  • "master" branch : just a vue 3 app with a router
  • "added-ssr" branch : took the "master" branch and added ssr code
  • "add-just-vuex" branch : took the "master" branch and added vuex code
  • "added-vuex-to-ssr" branch : app with router, vuex and ssr.

answered Nov 20 '20 at 20:11

se22asse22as

1,84433 gold badges2323 silver badges4444 bronze badges

Sours: https://stackoverflow.com/questions/64899690/vue-3-server-side-rendering-with-vuex-and-router

Server vue

Server side rendering can be explained as moving the process of rendering pages of an SPA from the client's browser to the server on initial page request. This process is similar to what we used to do a few years ago, where we had server side languages like PHP, Java, Python render the page and return an HTML response.

The difference is, that the server renders the page only on first page visit, once the page gets loaded by the client's browser, the JavaScript framework, Vue in our case, takes over the application's routing and rendering processes, giving the impression of a faster navigation and smoother experience.

Server side rendering solves a few of the most annoying problems of single-page applications:

# SEO friendly

Most crawlers cannot scan websites that are rendered with JavaScript, resulting search engines registering empty pages without content. This directly leads to bad search engine ranking.

Note: Google can actually parse and crawl JavaScript rendered websites, but this still does not guarantee good ranking. They also use an older version of Chrome to render the pages, which can lead to errors if code is not transpiled to support older browsers.

With SSR, pages are returned as fully rendered HTML by the server, allowing for crawlers to scan at will.

# Fast Load on Slower Devices

Heavy applications that require lots of resources for the initial rendering, may cause slower or older devices to struggle. This is a real problem, as the average user doesn't have the latest cutting edge mobile device.

With SSR, the page is fully rendered on the server, eliminating that initial burden for lower end devices. When paired with some other optimisation techniques, like code splitting, pages can load much faster.

# Social Presence

When sharing your website on various social media, they will show a small preview and extract metadata from it. Normal SPA applications are very poor at this and often result in blank pages with little to no metadata. Social media crawlers cant really parse JavaScript, so they don't know what to do with SPAs.

With SSR, pages are displayed with nice previews, as both the page content it self and meta tag data is present, allowing for social media crawlers to extract what they need.

# Time To First Paint (TTFP)

Pages will be rendered faster when using SSR, as the browser does not need to download the whole JavaScript bundle to start rendering. This does not however mean a fully functioning website.

# Problems with SSR

SSR sounds awesome, there are however some things that need to be taken in consideration.

# Time to Interactive

Even though users can see the website, it doesn't mean it is fully working. For very dynamic websites with a lot of JavaScript logic driving the UI, this can lead to weird situations where the page is rendered and looks ready, but the app bundle is still downloading, so no JavaScript logic can be executed yet.

# Time to First Byte (TTFB) is Slower

Because the server has to actually do the rendering, fetch async data and so on, the time it takes for the response to hit the browser is bigger.

# Server Costs

Because there is usually a live Node.js instance always on, waiting to render a request, server costs are higher than static file hosting.

# Server Load

This is directly related to the above. Server load is higher on initial request, while pages are being rendered, sometimes blocking other operations until the process is done.

# Platform Specific APIs are not Available

Because the app is rendered in server environment, there are specific APIs that are not available, like the object. This means libraries like sliders and carousels may not work, and will throw errors during render.

To overcome this, developers should not interact with those APIs, in places, that are being called during server rendering. Their usage should be moved to lifecycle hooks like , where the browser environment is present.

With sliders and carousels, you could delay their rendering to after the client receives the page, so it gets rendered on the browser.

# Complex to Transform Deployed SPA to SSR

Because of the above, already deployed websites are harder to transform to SSR, as there might be a lot of plugins or UI components, that rely on the Platform Specific APIs, explained above.

This is an issue mostly related with library and plugin authors not providing SSR compliant versions of their software.

There are ways around this, like using the component helpers, which delay rendering of components to the browser. This means that the component tag will be returned in the initial html response and not its rendered template. This might be problematic for components with SEO heavy content.

# Available Options for Vue

TIP

This part of the page is still in development and could use some help.

Thankfully, there are a few options already for Vue when it comes to server-side rendering.

# Nuxt popular

Nuxt is a framework on top of Vue for creating universal applications. It offers a full SSR environment, with an extendable API, out of the box.

If you are searching for a well tested solution, with a large community and nice development experience, Nuxt is most probably what you should pick.

Learn more about it on the dedicated Nuxt page.

# NuxtPress newcomer

Nuxtpress is a microframework on top of Nuxt for creating blogs and documentation using Markdown. It offers full support for Nuxt static generate mode and hot reloading for files.

Learn more about it on the dedicated Nuxt page.

# Quasar Framework

Quasar with its CLI mode of operation, allows for you to build a SPA or PWA and have it served from the server initially. This gives you all of the advantages mentioned above. Quasar's build system offers you a Node Express Server out of the box, which you can also later enhance as you wish. The main point being, one build command through Quasar's CLI does it all for you.

# Servue

Servue shares a similar scope to Nuxtjs, it allows you to render files into rendered html. It includes features for head meta tag management, layouts and more. Servue is more suitable for Multi-page-applications using existing server-side routing systems such as koa/koa-router or express.js

# Vapper

Vapper is a lighter framework for building server-rendered applications using Vue. Opposed to Nuxt, Vapper is more lower level oriented, meaning it does not rely so much on conventions, but rather lets the user choose how to configure their app.

If you need more freedom to configure your application, with little to no interference from the SSR framework, Vapper may be your choice.

# Vue Server Renderer

Vue Server Renderer is a lower level tool that is used by most of the above mentioned frameworks to render Vue apps on the server.

You can use it in tandem with an Express server or similar solution, to render pages on each user visit to the app. Just keep in mind, you will have to write a lot more boilerplate and configuration by yourself, compared to the already pre-made solutions.

If you don't need some really custom solution, we would advise you to pick one of the pre-made tools mentioned above.

Edit this page on GitHub

← Nuxt Static Site Generators →

Sours: https://vue-community.org/guide/ecosystem/server-side-rendering.html
Deploy Vuejs App On DigitalOcean Ubuntu Server

Creating Server-side Rendered Vue.js Apps Using Nuxt.js

JavaScript frameworks/libraries such as Vue can offer a fantastic user experience when browsing your site. Most offer a way of dynamically changing page content without having to send a request to the server each time.

However, there is an issue with this approach. When initially loading your website, your browser doesn’t receive a complete page to display. Instead, it gets sent a bunch of pieces to construct the page (HTML, CSS, other files) and instructions for how to put them all together (a JavaScript framework/library) It takes a measurable amount of time to put all this information together before your browser actually has something to display. It’s like being sent a bunch of books along with a flat-pack bookcase. You’d have to build the bookcase first and then fill it with the books.

The solution to this is clever: Have a version of the framework/library on the server that can build a ready-to-display page. Then send this complete page to the browser along with the ability to make further changes and still have dynamic page content (the framework/library), just like being sent a ready-made bookcase along with some books. Sure, you still have to put the books in the bookcase, but you’ve got something usable immediately.

Visual comparison of client-side and server-side rendering

Beyond the silly analogy, there are also a bunch of other advantages. For example, a page that rarely changes, such as an About Us page, doesn’t need to be recreated every single time a user asks for it. So a server can create it once and then cache it or store it somewhere for future use. These kinds of speed improvements may seem tiny, but in an environment where time until responsiveness is measured in milliseconds (or less), every little bit counts.

If you’d like more information on the advantages of SSR in a Vue environment, you should check out Vue’s own article on SSR. There is a variety of options to achieve these results, but the most popular one, which is also recommended by the Vue team, is Nuxt.

Why Nuxt.js

Nuxt.js is based off an implementation of SSR for the popular React library called Next. After seeing the advantages of this design, a similar implementation was designed for Vue called Nuxt. Those familiar with the React+Next combination will spot a bunch of similarities in design and layout of the application. However, Nuxt offers Vue-specific features to create a powerful yet flexible SSR solution for Vue.

Nuxt was updated to a production-ready 1.0 version in January 2018 and is part of an active and well-supported community. One of the great things is that building a project using Nuxt isn’t that different from building any other Vue project. In fact, it provides a bunch of features that allow you to create well-structured codebases in a reduced amount of time.

Another important thing to note is Nuxt doesn’t have to be used for SSR. It’s promoted as a framework for creating universal Vue.js applications and includes a command () for creating static generated Vue applications using the same codebase. So if you’re apprehensive about diving deep into SSR, don’t panic. You can always create a static site instead while still taking advantage of Nuxt’s features.

In order to grasp the potential of Nuxt, let’s create a simple project. The final source code for this project is hosted on GitHub if you want to see it, or you can view a live version created using and hosted on Netlify.

Creating a Nuxt Project

To start off, let’s use a Vue project generator called to quickly create a sample project:

After going through a couple options, this will create a project inside the folder or whatever you specified. Then we just need to install dependencies and run the server:

There we go. Open your browser to and your project should be running. Not much different from creating a Vue Webpack project. However, when we look at the actual structure of the app, there’s not much there, especially when compared to something like the Vue Webpack template.

Diagram of project directories and their relation to the Nuxt config file

Looking in the also shows that we only have one dependency, Nuxt itself. This is because each version of Nuxt is tailored to work with specific versions of Vue, Vue-router, and Vuex and bundles them all together for you.

There is also a file at the project root. This allows you to customize a bunch of features that Nuxt provides. By default, it sets the header tags, loading bar color, and ESLint rules for you. If you’re eager to see what you can configure, here’s the documentation; we will be covering some options in this article.

So what’s so special about those directories?

Project Layout

If you browse through the directories created, all of them have an accompanying Readme stating a brief summary of what goes in that directory and often a link to the docs.

This is one benefit of using Nuxt: a default structure for your application. Any good front-end developer will structure an application similar to this, but there are many different ideas about structures, and when working on a team, some time will inevitably go into discussing or choosing this structure. Nuxt provides one for you.

Nuxt will look for certain directories and build your application for you depending on what it finds. Let’s examine these directories one by one.

Pages

This is the only required directory. Any Vue components in this directory are automatically added to based on their filenames and the directory structure. This is extremely convenient. Normally I would have a separate Pages directory anyway and have to manually register each of those components in another router file. This router file can become complex for larger projects and may need splitting to maintain readability. Instead, Nuxt will handle all of this logic for you.

To demonstrate, we can create a Vue component called inside the Pages directory. Let’s just add a simple template such as:

When you save, Nuxt will re-generate the routes for you. Seeing as we called our component , if you navigate to , you should see that component. Simple.

There is one filename which is special. Naming a file will create a root route for that directory. When the project is generated, there’s already an component in the pages directory which correlates to the homepage or landing page of your site. (In the development example, this would simply be .)

Nuxt scans the Vue files in the pages directory and outputs the appropriate pages.

What about deeper routes? Sub-directories in the Pages directory help to structure your routes. So if we wanted a View Product page, we could structure our Pages directory something like this:

Now, if we navigate to , we will see the component inside the products directory. If we navigate instead to , we will see the component inside the products directory.

You may be asking why we didn’t just create a component in the pages directory instead like we did for the page. You may think the result would be the same, but there is a difference between the two structures. Let’s demonstrate this by adding another new page.

Say we wanted a seperate About page for each employee. For example, let’s create an About page for me. It should be located at . Initially, we may try structuring the Pages directory like this:

When we try to access , we instead get the component, the same as . What’s going on here?

Interestingly, what Nuxt is doing here is generating a nested route. This structure suggests that you want a permanent route and anything inside that route should be nested in its own view area. In vue-router, this would be signified by specifying a component inside the component. In Nuxt, this is the same concept except, instead of , we simply use . So let’s update our component to allow for nested routes:

Now, when we navigate to , we get the component we had before, with just a title. However, when we navigate to , we instead have the title and the component rendered where the placeholder was.

This wasn’t what we initially wanted, but the idea of having an About page with a list of people that, when clicked on, fill a section on the page with their information is an interesting concept, so let’s leave it as is for now. If you did want the other option, then all we would do is restructure our directories. We’d just have to move the component inside the directory and rename it , so the resulting structure would be:

Finally, say we wanted to use route params to retrieve a specific product. For example, we want to be able to edit a product by navigating to where 64 is the . We can do this the following way:

Note the underscore at the beginning of the component—this signifies a route param which is then accessible on the object or on the object in Nuxt’s Context (more on that later). Note that the key for the param will be the component name without the initial underscore—in this case, —so try to keep them unique within the project. As a result, in , we may have something like:

You can start to imagine more complex layouts, which would be a pain to set up using vue-router. For example, we can combine all of the above into a route such as:

It’s not too difficult to reason on what would display. We would have the component with a nested component, with two route params: and . This is much simpler to reason on than an equivalent router config.

While we’re on the topic, one thing I tend to do in the router config is set up router guards. As Nuxt is building the router for us, this can be done instead on the component itself with . If you want to validate route params, Nuxt provides a component method called . So if you wanted to check if the was a number before trying to render the component, you would add the following to the script tag of :

Now, navigating to results in a 404 because isn’t a valid number.

That’s it for the Pages directory. Learning how to structure your routes properly in this directory is essential, so spending a little time initially is important to getting the most out of Nuxt. If you’re looking for a brief overview, it is always helpful to refer to the docs for routing.

If you’re worried about not being in control of the router, don’t be. This default setup works great for a wide variety of projects, provided they are well structured. However, there are some cases where you may need to add more routes to the router than Nuxt automatically generates for you or restructure them. Nuxt provides a way to customize the router instance in the config, allowing you to add new routes and customize generated routes. You can also edit the core functionality of the router instance, including extra options added by Nuxt. So if you do encounter an edge case, you still have the flexibility to find the appropriate solution.

Store

Nuxt can build your Vuex store based on the structure of the store directory, similar to the Pages directory. If you don’t need a store, just remove the directory. There are two modes for the store, Classic and Modules.

Classic requires you to have an file in the store directory. There you need to export a function that returns a Vuex instance:

This allows you to create the store however you wish, much like using Vuex in a normal Vue project.

Modules mode also requires you to create an file in the store directory. However, this file only needs to export the root state/mutations/actions for your Vuex store. The example below specifies a blank root state:

Then, each file in the store directory will be added to the store in its own namespace or module. For example, let’s create somewhere to store the current product. If we create a file called in the store directory, then a namespaced section of the store will be available at . Here’s a simple example of what that file may look like:

The in the load action simulates some sort of API call, which will update the store with the response; in this case, it takes one second. Now, let’s use it in the page:

A few things to note: Here, we are calling our fake API when the component is created. You can see that the action we are dispatching is namespaced under Product. This makes it clear exactly what section of the store we are dealing with. Then, by mapping the state to a local computed property, we can easily use it in our template.

There is a problem: We see the original state for a second while the API runs. Later, we will use a solution provided by Nuxt to fix this (known as ).

Just to stress this again, we never had to , as it is already included in the Nuxt package. When you add an file to the store directory, all those methods are then opened up to you automatically.

That’s the main two directories explained; the rest are much simpler.

Components

The Components directory is there to contain your reusable components such as a navigation bar, image gallery, pagination, data tables, etc. Seeing as components in the Pages directory are converted into routes, you need somewhere else to store these types of components. These components are accessible in pages or other components by importing them:

Assets

This contains uncompiled assets and has more to do with how Webpack loads and processes files, rather than with how Nuxt works. If you’re interested, I suggest reading the guide in the Readme.

Static

This contains static files which are mapped to the root directory of your site. For example, putting an image called logo.png in this directory would make it available at . This is good for meta files like robots.txt, favicon.ico, and other files you need available.

Layouts

Normally, in a Vue project, you have some sort of root component, normally called . Here is where you can set up your (normally static) app layout, which may include a navbar, footer, and then a content area for your vue-router. The layout does exactly that and is provided for you in the layouts folder. Initially, all it has is a div with a component (which is equivalent to ) but it can be styled however you wish. For example, I’ve added a simple navbar to the example project for navigation around the various demonstration pages.

A layout can be applied to multiple pages.

You may want to have a different layout for a certain section of your app. Maybe you have some sort of CMS or admin panel that looks different. To solve this, create a new layout in the Layouts directory. As an example, let’s create an layout which just has an extra header tag and no navbar:

Then, we can create an page in the Pages directory and use a property provided by Nuxt called to specify the name (as a string) of the layout we want to use for that component:

That’s all there is to it. Page components will use the layout unless specified, but when you navigate to , it now uses the layout. Of course, this layout could be shared across several admin screens if you wish. The one important thing to remember is layouts must contain a element.

There’s one final thing to note about layouts. You may have noticed while experimenting that if you type an invalid URL, you are shown an error page. This error page is, in fact, another layout. Nuxt has its own error layout (source code here), but if you wanted to edit it, just create an layout and that will be used instead. The caveat here is that the error layout must not have a element. You will also have access to an object on the component with some basic information to display. (This is printed out in the terminal running Nuxt if you want to examine it.)

Middleware

Middleware are functions that can be executed before rendering a page or layout. There is a variety of reasons you may want to do so. Route guarding is a popular use where you could check the Vuex store for a valid login or validate some params (instead of using the method on the component itself). One project I worked on recently used middleware to generate dynamic breadcrumbs based on the route and params.

These functions can be asynchronous; just be careful, as nothing will be shown to the user until the middleware is resolved. They also have access to Nuxt’s Context, which I will explain later.

Plugins

This directory allows you to register Vue plugins before the application is created. This allows the plugin to be shared throughout your app on the Vue instance and be accessible in any component.

Most major plugins have a Nuxt version that can be easily registered to the Vue instance by following their docs. However, there will be circumstances when you will be developing a plugin or need to adapt an existing plugin for this purpose. An example I’m borrowing from the docs shows how to do this for . First, we need to install the package:

Then create a file in the plugins directory called and include the following:

Very similar to how you would register a plugin in a normal Vue environment. Then edit the file at your project root and add the following entry to the module.exports object:

That’s it. Now you can use throughout your app. An example of this is at in the example project.

So that completes a rundown of the directory structure. It may seem a lot to learn, but if you’re developing a Vue app, you’re already setting up the same kind of logic. Nuxt helps to abstract away the setup and help you focus on building.

Nuxt does more than assist in development though. It supercharges your components by providing extra functionality.

Nuxt’s Supercharged Components

When I first started researching Nuxt, I kept reading about how Page components are supercharged. It sounded great, but it wasn’t immediately obvious what exactly that meant and what benefits it brings.

What it means is that all Page components have extra methods attached to them that Nuxt can use to provide additional functionality. In fact, we’ve already seen one of these earlier when we used the method to check params and redirect a user if they are invalid.

The two main ones used in a Nuxt project will be the and methods. Both are very similar in concept, they are run asynchronously before the component is generated, and they can be used to populate the data of a component and the store. They also enable the page to be fully rendered on the server before sending it to the client even when we have to wait for some database or API call.

What’s the difference between and ?

  • is used to populate the data of the Page component. When you return an object, it is then merged with the output of before rendering.
  • is used to populate the Vuex Store. If you return a promise, Nuxt will wait until it is resolved before rendering.

So let’s put these to good use. Remember earlier on the page we had a problem where the initial state of the store was being displayed briefly while our fake API call was being made? One way of fixing this is having a boolean stored on the component or in the Store such as and then displaying a loading component while the API call finishes. Afterward, we would set and display the data.

Instead, let’s use to populate the Store before rendering. In a new page called , let’s change the method to ; that should work, right?

Here’s the catch: These “supercharged” methods run before the component is created, so doesn’t point to the component and nothing on it can be accessed. So how do we access the Store here?

The Context API

Of course, there is a solution. On all of Nuxt’s methods, you are provided with an argument (normally the first) containing an extremely useful object called the Context. In this is everything you will need reference to across the app, meaning we don’t need to wait for Vue to create those references on the component first.

I would highly recommend checking out the Context docs to see what is available. Some handy ones are , where you can access all your plugins, , which can be used to change routes, to display the error page, and some self-explanatory ones such as , , and .

So, to access the Store, we can destructure the Context and extract the Store from it. We also need to make sure we return a promise so that Nuxt can wait for it to resolve before rendering the component, so we need to make a small adjustment to our Store action too.

You could use async/await or other methods depending on your coding style, but the concept is the same—we’re telling Nuxt to make sure the API call finishes and the Store is updated with the result before trying the render the component. If you try navigating to , you will not see the flash of content where the product is in its initial state.

You can imagine how useful this can be in any Vue app even without SSR. The Context is also available to all middlewares as well as to other Nuxt methods such as which is a special store action that runs before the Store is initialized (an example of this is in the next section)

I’m sure many (myself included) who start using a technology such as Nuxt while treating it like any other Vue project eventually hit a wall where something we know would normally work seems impossible in Nuxt. As more of these caveats are documented, it will be easier to overcome, but the main thing to consider when starting to debug is that the client and server are two separate entities.

When you access a page initially, a request is sent to Nuxt, the server builds as much as possible of that page and the rest of the app, and then the server sends it to you. Then the responsibility is on the client to continue with navigation and load chunks as it needs them.

We want the server to do as much as possible first, but sometimes it doesn’t have access to the information it needs, which results in the work being done client-side instead. Or worse, when the final content presented by the client is different from what the server expected, the client is told to rebuild it from scratch. This is a big indication that something is wrong with the application logic. Thankfully, an error will be generated in your browser’s console (in development mode) if this starts to happen.

Let’s take an example of how to solve a common issue, session management. Imagine you have a Vue app where you can log in to an account, and your session is stored using a token (JWT, for example) which you decide to keep in . When you initially access the site, you want to authenticate that token against an API, which returns some basic user info if valid and puts that information in the Store.

After reading through Nuxt’s docs, you see that there’s a handy method called which allows you to asynchronously populate the Store once on initial load. That sounds perfect! So you create your user module in the Store and add the appropriate action in the file in the Store directory:

When you refresh the page, you get an error, . Thinking about where this is happening, it makes sense. This method is run on the server, it has no idea what is stored in on the client; in fact, it doesn’t even know what “localStorage” is! So that’s not an option.

The server tries to execute localStorage.getItem('token') but throws an error, then a caption below explaining the problem.

So what’s the solution? There are a few, actually. You can get the client to initialize the Store instead but end up losing the benefits of SSR because the client ends up doing all the work. You can set up sessions on the server and then use that to authenticate the user, but that’s another layer to set up. What’s most similar to the method is using cookies instead.

Nuxt has access to cookies because they are sent with the request from the client to the server. As with other Nuxt methods, has access to the Context, this time as the second argument because the first is reserved for the store. On the Context, we can access the object, which stores all the headers and other information from the client request. (This will be especially familiar if you’ve used Node.js.)

So after storing the token in a cookie instead (called “token,” in this case), let’s access it on the server.

A simple solution, but one that might not be immediately obvious. Learning to think about where certain actions are happening (client, server, or both) and what they have access to takes some time but the benefits are worth it.

Deployment

Deployment with Nuxt is extremely simple. Using the same codebase, you can create an SSR app, single-page application, or static page.

This is probably what you were aiming for when using Nuxt. The basic concept for deployment here is to run the process on whatever platform you choose and set a few configurations. I’ll use the Heroku example from the docs:

First, set up scripts for Heroku in :

Then set up the Heroku environment using the (setup instructions here:

That’s it. Now your SSR Vue app is live ready for the world to see. Other platforms have different setups, but the process is similar. The official deployment methods currently listed are:

Single-page Application (SPA)

If you wanted to take advantage of some of the extra features Nuxt provides but avoid the server trying to render pages, then you can deploy as an SPA instead.

First, it’s best to test your application without the SSR as by default runs with SSR on. To change that, edit the file and add the following option:

Now, when you run , SSR will be turned off and the application will run as an SPA for you to test. This setting also makes sure no future builds will include SSR.

If everything looks fine, then deployment is exactly the same as for an SSR app. Just remember you need to set first to let the build process know you want an SPA.

Static Pages

If you don’t want to deal with a server at all and instead want to generate pages for use with static hosting services such as Surge or Netlify, then this is the option to choose. Just bear in mind that, without a server, you won’t be able to access the and in the Context, so if your code relies on that, be sure to accommodate it. For example, when generating the example project, the function throws an error because it’s trying to fetch a token from the cookies in the request headers. In this project, it doesn’t matter, as that data isn’t being used anywhere, but in a real application, there would need to be an alternative way to access that data.

Once that’s sorted, deployment is easy. One thing you will probably need to change first is adding an option so that the command will also create a fallback file. This file will prompt the hosting service to let Nuxt handle the routing rather than the hosting service, throwing a 404 error. To do so, add the following line to :

Here’s an example using Netlify, which isn’t currently in the Nuxt docs. Just bear in mind that if this is your first time using , you will be prompted to authenticate:

It’s as simple as that! As mentioned at the beginning of the article, there’s a version of this project here. There’s also official deployment documentation for the following services below:

Learn More

Nuxt is updating rapidly, and this is only a small selection of the features it offers. I hope this article encourages you to try it out and see if it could help improve the capabilities of your Vue applications, allowing you to develop faster and take advantage of its powerful features.

If you’re looking for more information, then look no further than Nuxt’s official links:

Looking to up your JavaScript game? Try reading The Comprehensive Guide to JavaScript Design Patterns by fellow Toptaler Marko Mišura.

Understanding the basics

Vue.js (or simply Vue) is a JavaScript framework designed to be light and easy to learn yet powerful enough to handle large applications. It allows you to develop richly interactive web apps that can provide a superior user experience.

Nuxt is a framework for creating universal Vue applications. This means that it provides a structure for your project, it handles the more complicated server configuration for you, and it allows the same codebase to be deployed in various environments.

Yes, both of their codebases are publicly viewable on GitHub and are under continual development. Both have core teams and are supported by their communities. Issues are tracked there, and anyone is welcome to suggest improvements or submit a pull request.

Client side refers to the device that is used to request and ultimately display the web page, e.g., the browser on your computer/tablet/phone when you browse to a website. Server side refers to the server that receives the request for a web page and sends the appropriate files to display it.

SSR provides better SEO, a faster initial load, and the ability to cache pages but generally means more server requests and full page reloads. Combining SSR with the benefits of a framework on the client side (such as Vue) offers rich user interaction and in-place DOM updates too, making Nuxt a great solution.

Frameworks like Vue.js allow partial updates to a webpage's Document Object Model (DOM). However, direct DOM updates are time-expensive, so instead, since Vue.js 2.0, a virtual copy of the DOM is kept in-memory, changes are made there first, and an efficient update periodically adds those changes to the real DOM.

Sours: https://www.toptal.com/vue-js/server-side-rendered-vue-js-using-nuxt-js

You will also like:

Chapter 11. Communicating with a server

  • Using Nuxt.js for server-side rendering
  • Retrieving third-party data with Axios
  • Using VuexFire
  • Adding authentication

We’ve discussed Vuex and how state management can benefit our larger Vue.js applications. Now we’re going to look at communicating with a server. In this chapter, we’ll look at server-side rendering (SSR) and how we can use it to help improve our app’s responsiveness. We’ll use Axios to retrieve data from a third-party API. Then we’ll look at VuexFire. VuexFire is library that helps us communicate with Firebase, a backend service that helps with application development. Last, we’ll see how to add simple authentication to our VuexFire app.

Before we move on, let me preface this chapter by saying there are many ways to communicate with a server in Vue.js. We could use an or use any number of AJAX libraries out there. In the past, Vue officially recommended the Vue resource library as the official AJAX library. Evan You, the creator of Vue, retired the library in late 2016 from official recommendation status. As far as the Vue community goes, you can use whatever library you like.

11.1. Server-side rendering

11.2. Introducing Nuxt.js

11.3. Communicating with a server using Firebase and VuexFire

Exercise

Summary

Sours: https://livebook.manning.com/book/vue-js-in-action/chapter-11/


15676 15677 15678 15679 15680