Nuxt.js: template on client side

Created on 1 Sep 2017  ·  17Comments  ·  Source: nuxt/nuxt.js

I have template in .vue file

<template>
            <div class="hidden_tovar" v-for="good in goods" @click="goToLink">
                <nuxt-link :to="'/product/'+good.id"><img :src="good.image" alt="" class="big"></nuxt-link>
                <div class="info">
                    <span class="brand">“{{good.brend}}”</span>
                    <h2 class="goodsTitle">{{good.title}}</h2>
                    <p class="desc goodsDesc">{{good.description}}</p>
                </div>
                <div class="prices">
                    <nuxt-link :to="'/product/'+good.id"><img :src="good.image" alt="" class="mini"></nuxt-link>
                    <div class="price">от<span class="goodsPrice">{{good.min_price}}</span><span class="rub">С</span></div>

                            <div class="tovar_hidden_box_content">
                                <div><p>{{good.sostav}}</p></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </template>

I need it to be executed on the client side, ignoring the execution on the server side. How can this be achieved?

This question is available on Nuxt.js community (#c1389)
help-wanted
Source
picture Jussiadev

Most helpful comment

remove your package-lock.json files and your node_modules folder and run npm install again.

or, create a github project and share all your code...

picture NicoPennec on 2 Sep 2017
👍2

All 17 comments

Hi @Jussiadev
Add component (from vue-no-ssr), it allows you to render component only for client-side, see example

miladmeidanshahi picture miladmeidanshahi on 2 Sep 2017
👍1

@miladmeidanshahi
##I'm include vue-no-ssr
My package.json

{
  "name": "mynuxt",
  "version": "1.0.0",
  "config": {
    "nuxt": {
      "port": "3333"
    }
  },
  "description": "[email protected]",
  "main": "index.js",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.16.2",
    "bulma": "^0.5.1",
    "hover.css": "^2.2.0",
    "node-sass": "^4.5.3",
    "nuxt": "^1.0.0-rc4",
    "sass-loader": "^6.0.6",
    "vue-no-ssr": "^0.2.0",
    "vue-style-loader": "^3.0.1"
  }
}

My .vue page

<template>
<div>
    <FormLine/>
    <div class="grid preview-list" id='preview-list' data-url="https://jsonplaceholder.typicode.com/photos">
        <div class="tovar container preview-list-items" id="preview-list-items">
            <no-ssr placeholder="Loading">

            <div class="hidden_tovar" v-for="good in goods" @click="goToLink">

                <a :href="'/product/'+good.id"><img :src="good.image" alt="" class="big"></a>


                <div class="info">
                    <span class="brand">“{{good.brend}}”</span>
                    <h2 class="goodsTitle">{{good.title}}</h2>
                    <p class="desc goodsDesc">{{good.description}}</p>
                </div>

                <div class="prices">
                    <nuxt-link :to="'/product/'+good.id"><img :src="good.image" alt="" class="mini"></nuxt-link>
                    <div class="price">от<span class="goodsPrice">{{good.min_price}}</span><span class="rub">С</span></div>
                            <div class="tovar_hidden_box_content">
                                <div><p>{{good.sostav}}</p></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </no-ssr>
        </div>
            <div class="sale"></div>
    </div>
    <div class="clear-both"></div>
    <div id="preview-buttons">
    </div>
    <div class="clear-both"></div>
    <!--</div>-->
</div>
</template>

<script>
    import FormLine from '~/components/formLine'
    import NuxtLink from "../.nuxt/components/nuxt-link"
    import axios from 'axios'
    import NoSSR from 'vue-no-ssr'
    export default {

        head: {
            script: [
                { src: '/libs/jquery/jquery-1.11.1.min.js' },
                { src: '/libs/vue/vue.min.js' },
                { src: '/libs/axios/axios.min.js' },
                { src: '/js/scroll.js' }
            ]
        },
        components: {NuxtLink,
            FormLine,
            'no-ssr': NoSSR},
        name: 'GooodsGrid',
 }
<script>

But in console of browser this code does not exist. Inside is empty :(

Jussiadev picture Jussiadev on 2 Sep 2017

wich exact version of Nuxt do you use ?

Run the following command: npm list --depth 0

<no-ssr> is available since nuxt 1.0.0. rc7

if you are not up-to-date, please try to run an update: npm upgrade nuxt (or yarn upgrade nuxt)

NicoPennec picture NicoPennec on 2 Sep 2017

@NicoPennec I have now updated, but there were warnings and when I built errors appeared. How to fix them?

warnings after update

npm WARN [email protected] requires a peer of webpack@^3.1.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none was installed.
npm WARN [email protected] requires a peer of webpack@^1.3.0 || ^2 || ^3 but none was installed.
npm WARN [email protected] requires a peer of webpack@^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0 but none was installed.
npm WARN [email protected] requires a peer of css-loader@* but none was installed.
npm WARN [email protected] requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.
npm WARN [email protected] No repository field.
Jussiadev picture Jussiadev on 2 Sep 2017

Can you clean your deps and retry ?
rm -rf node_modules/ && npm install

NicoPennec picture NicoPennec on 2 Sep 2017

@NicoPennec
I did it and there is one warning left
npm WARN [email protected] No repository field.

Jussiadev picture Jussiadev on 2 Sep 2017

You have to add "private": true, in your package.json

  "name": "mynuxt",
  "version": "1.0.0",
  "private": true,
NicoPennec picture NicoPennec on 2 Sep 2017

@NicoPennec
I did it and now when i do npm run build I have an errors

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `nuxt build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jussia/.npm/_logs/2017-09-02T13_31_46_385Z-debug.log
Jussiadev picture Jussiadev on 2 Sep 2017

share your log content : /Users/jussia/.npm/_logs/2017-09-02T13_31_46_385Z-debug.log

NicoPennec picture NicoPennec on 2 Sep 2017

@NicoPennec 

0 info it worked if it ends with ok

1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]

2 info using [email protected]

3 info using [email protected]

4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]

5 info lifecycle [email protected]~prebuild: [email protected]

6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing

7 info lifecycle [email protected]~build: [email protected]

8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true

9 verbose lifecycle [email protected]~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/jussia/sites/build/mynuxt/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

10 verbose lifecycle [email protected]~build: CWD: /Users/jussia/sites/build/mynuxt

11 silly lifecycle [email protected]~build: Args: [ '-c', 'nuxt build' ]

12 silly lifecycle [email protected]~build: Returned: code: 1  signal: null

13 info lifecycle [email protected]~build: Failed to exec build script

14 verbose stack Error: [email protected] build: `nuxt build`

14 verbose stack Exit status 1

14 verbose stack     at EventEmitter.<anonymous> 
(/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:283:16)

14 verbose stack     at emitTwo (events.js:106:13)

14 verbose stack     at EventEmitter.emit (events.js:194:7)

14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)

14 verbose stack     at emitTwo (events.js:106:13)

14 verbose stack     at ChildProcess.emit (events.js:194:7)

14 verbose stack     at maybeClose (internal/child_process.js:899:16)

14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

15 verbose pkgid [email protected]

16 verbose cwd /Users/jussia/sites/build/mynuxt

17 verbose Darwin 16.6.0

18 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"

19 verbose node v7.10.0

20 verbose npm  v5.0.3

21 error code ELIFECYCLE

22 error errno 1

23 error [email protected] build: `nuxt build`

23 error Exit status 1

24 error Failed at the [email protected] build script.

24 error This is probably not a problem with npm. There is likely additional logging output above.

25 verbose exit [ 1, true ]
Jussiadev picture Jussiadev on 2 Sep 2017

@Jussiadev and you can run npm run dev without error ???

nb: this import is weird, remove it => import NuxtLink from "../.nuxt/components/nuxt-link"

nb2 this import is useless too with nuxt >=rc7 import NoSSR from 'vue-no-ssr'

NicoPennec picture NicoPennec on 2 Sep 2017
👍1

@NicoPennec No

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `nuxt`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jussia/.npm/_logs/2017-09-02T14_24_37_347Z-debug.log
Jussiadev picture Jussiadev on 2 Sep 2017 
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 silly lifecycle [email protected]~predev: no script for predev, continuing
7 info lifecycle [email protected]~dev: [email protected]
8 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~dev: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/jussia/sites/build/mynuxt/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
10 verbose lifecycle [email protected]~dev: CWD: /Users/jussia/sites/build/mynuxt
11 silly lifecycle [email protected]~dev: Args: [ '-c', 'nuxt' ]
12 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
13 info lifecycle [email protected]~dev: Failed to exec dev script
14 verbose stack Error: [email protected] dev: `nuxt`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:283:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/jussia/sites/build/mynuxt
17 verbose Darwin 16.6.0
18 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
19 verbose node v7.10.0
20 verbose npm  v5.0.3
21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] dev: `nuxt`
23 error Exit status 1
24 error Failed at the [email protected] dev script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]
Jussiadev picture Jussiadev on 2 Sep 2017

remove your package-lock.json files and your node_modules folder and run npm install again.

or, create a github project and share all your code...

NicoPennec picture NicoPennec on 2 Sep 2017
👍2

another way, upgrade your nodejs to the last version (v8)

NicoPennec picture NicoPennec on 2 Sep 2017

@NicoPennec sorry for the trouble, but I deleted and reinstalled my package-lock.json, package.json and node_modules, errors are gone, but my .vue file was still there and the browser console still does not display what's inside

Jussiadev picture Jussiadev on 2 Sep 2017

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

lock[bot] picture lock[bot] on 3 Nov 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

vadimsg picture vadimsg  ·  3Comments
surmon-china picture surmon-china  ·  3Comments
nassimbenkirane picture nassimbenkirane  ·  3Comments
shyamchandranmec picture shyamchandranmec  ·  3Comments
o-alexandrov picture o-alexandrov  ·  3Comments