diff --git a/docs/guide/README.md b/docs/guide/README.md index 15485e25..f9be2192 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -16,6 +16,8 @@ We will be using NPM throughout the guide, but feel free to use [Yarn](https://y ## Rendering a Vue Instance +Save the following code in a `.js` file, for example `render1.js` + ``` js // Step 1: Create a Vue instance const Vue = require('vue') @@ -41,6 +43,20 @@ renderer.renderToString(app).then(html => { }) ``` +To run the code, from the prompt console of your OS execute + +``` bash +node .\render1.js +``` + +You should see the following output. Row is duplicated if you keep both `rendered.renderToString(..)`, otherwise you see only one row of output. + +``` +
Hello World
+
Hello World
+``` + + ## Integrating with a Server It is pretty straightforward when used inside a Node.js server, for example [Express](https://expressjs.com/): @@ -49,6 +65,9 @@ It is pretty straightforward when used inside a Node.js server, for example [Exp npm install express --save ``` --- + +Save the following code in a `.js` file, for example `render2.js` + ``` js const Vue = require('vue') const server = require('express')() @@ -80,6 +99,20 @@ server.get('*', (req, res) => { server.listen(8080) ``` +To run the code, from the prompt console of your OS execute + +``` bash +node .\render2.js +``` + +Then open your browser at [http://localhost:8080](http://localhost:8080) + +You should see no output in the console, but you'll see what follows in your browser + +``` +The visited URL is: / +``` + ## Using a Page Template When you render a Vue app, the renderer only generates the markup of the app. In the example we had to wrap the output with an extra HTML page shell.