template on client side #1558

Jussiadev · 2017-09-01T21:23:04Z

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)}

The text was updated successfully, but these errors were encountered:

miladmeidanshahi · 2017-09-02T04:53:07Z

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

Jussiadev · 2017-09-02T12:47:58Z

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

{
  "name": "mynuxt",
  "version": "1.0.0",
  "config": {
    "nuxt": {
      "port": "3333"
    }
  },
  "description": "jussiadev@gmail.com",
  "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 :(

NicoPennec · 2017-09-02T13:02:02Z

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)

Jussiadev · 2017-09-02T13:12:51Z

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

warnings after update

npm WARN extract-text-webpack-plugin@3.0.0 requires a peer of webpack@^3.1.0 but none was installed.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none was installed.
npm WARN progress-bar-webpack-plugin@1.10.0 requires a peer of webpack@^1.3.0 || ^2 || ^3 but none was installed.
npm WARN sass-loader@6.0.6 requires a peer of webpack@^2.0.0 || >= 3.0.0-rc.0 || ^3.0.0 but none was installed.
npm WARN uglifyjs-webpack-plugin@0.4.6 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 vue-loader@13.0.4 requires a peer of css-loader@* but none was installed.
npm WARN webpack-dev-middleware@1.12.0 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.
npm WARN mynuxt@1.0.0 No repository field.

NicoPennec · 2017-09-02T13:16:21Z

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

Jussiadev · 2017-09-02T13:19:51Z

@NicoPennec
I did it and there is one warning left
npm WARN mynuxt@1.0.0 No repository field.

NicoPennec · 2017-09-02T13:25:57Z

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

  "name": "mynuxt",
  "version": "1.0.0",
  "private": true,

Jussiadev · 2017-09-02T13:36:05Z

@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! mynuxt@1.0.0 build: `nuxt build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mynuxt@1.0.0 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

NicoPennec · 2017-09-02T14:00:13Z

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

Jussiadev · 2017-09-02T14:12:40Z

@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 npm@5.0.3

3 info using node@v7.10.0

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

5 info lifecycle mynuxt@1.0.0~prebuild: mynuxt@1.0.0

6 silly lifecycle mynuxt@1.0.0~prebuild: no script for prebuild, continuing

7 info lifecycle mynuxt@1.0.0~build: mynuxt@1.0.0

8 verbose lifecycle mynuxt@1.0.0~build: unsafe-perm in lifecycle true

9 verbose lifecycle mynuxt@1.0.0~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 mynuxt@1.0.0~build: CWD: /Users/jussia/sites/build/mynuxt

11 silly lifecycle mynuxt@1.0.0~build: Args: [ '-c', 'nuxt build' ]

12 silly lifecycle mynuxt@1.0.0~build: Returned: code: 1  signal: null

13 info lifecycle mynuxt@1.0.0~build: Failed to exec build script

14 verbose stack Error: mynuxt@1.0.0 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 mynuxt@1.0.0

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 mynuxt@1.0.0 build: `nuxt build`

23 error Exit status 1

24 error Failed at the mynuxt@1.0.0 build script.

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

25 verbose exit [ 1, true ]

NicoPennec · 2017-09-02T14:22:48Z

@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'

Jussiadev · 2017-09-02T14:26:16Z

@NicoPennec No

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mynuxt@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mynuxt@1.0.0 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 · 2017-09-02T14:26:49Z

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 npm@5.0.3
3 info using node@v7.10.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle mynuxt@1.0.0~predev: mynuxt@1.0.0
6 silly lifecycle mynuxt@1.0.0~predev: no script for predev, continuing
7 info lifecycle mynuxt@1.0.0~dev: mynuxt@1.0.0
8 verbose lifecycle mynuxt@1.0.0~dev: unsafe-perm in lifecycle true
9 verbose lifecycle mynuxt@1.0.0~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 mynuxt@1.0.0~dev: CWD: /Users/jussia/sites/build/mynuxt
11 silly lifecycle mynuxt@1.0.0~dev: Args: [ '-c', 'nuxt' ]
12 silly lifecycle mynuxt@1.0.0~dev: Returned: code: 1  signal: null
13 info lifecycle mynuxt@1.0.0~dev: Failed to exec dev script
14 verbose stack Error: mynuxt@1.0.0 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 mynuxt@1.0.0
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 mynuxt@1.0.0 dev: `nuxt`
23 error Exit status 1
24 error Failed at the mynuxt@1.0.0 dev script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

NicoPennec · 2017-09-02T14:32:24Z

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 · 2017-09-02T14:45:17Z

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

Jussiadev · 2017-09-02T20:23:59Z

@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

lock · 2018-11-03T17:05:23Z

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.

alexchopin added the help wanted label Sep 2, 2017

Jussiadev closed this as completed Sep 4, 2017

onlyurei mentioned this issue Oct 6, 2017

need SSR usage example craigh411/vue-star-rating#17

Open

lock bot locked as resolved and limited conversation to collaborators Nov 3, 2018

danielroe added the 2.x label Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

template on client side #1558

template on client side #1558

Jussiadev commented Sep 1, 2017 •

edited by ghost

miladmeidanshahi commented Sep 2, 2017

Jussiadev commented Sep 2, 2017 •

edited

NicoPennec commented Sep 2, 2017

Jussiadev commented Sep 2, 2017

NicoPennec commented Sep 2, 2017 •

edited

Jussiadev commented Sep 2, 2017

NicoPennec commented Sep 2, 2017 •

edited

Jussiadev commented Sep 2, 2017

NicoPennec commented Sep 2, 2017

Jussiadev commented Sep 2, 2017 •

edited

NicoPennec commented Sep 2, 2017 •

edited

Jussiadev commented Sep 2, 2017

Jussiadev commented Sep 2, 2017

NicoPennec commented Sep 2, 2017 •

edited

NicoPennec commented Sep 2, 2017

Jussiadev commented Sep 2, 2017

lock bot commented Nov 3, 2018

template on client side #1558

template on client side #1558

Comments

Jussiadev commented Sep 1, 2017 • edited by ghost

miladmeidanshahi commented Sep 2, 2017

Jussiadev commented Sep 2, 2017 • edited

NicoPennec commented Sep 2, 2017

Jussiadev commented Sep 2, 2017

NicoPennec commented Sep 2, 2017 • edited

Jussiadev commented Sep 2, 2017

NicoPennec commented Sep 2, 2017 • edited

Jussiadev commented Sep 2, 2017

NicoPennec commented Sep 2, 2017

Jussiadev commented Sep 2, 2017 • edited

NicoPennec commented Sep 2, 2017 • edited

Jussiadev commented Sep 2, 2017

Jussiadev commented Sep 2, 2017

NicoPennec commented Sep 2, 2017 • edited

NicoPennec commented Sep 2, 2017

Jussiadev commented Sep 2, 2017

lock bot commented Nov 3, 2018

Jussiadev commented Sep 1, 2017 •

edited by ghost

Jussiadev commented Sep 2, 2017 •

edited

NicoPennec commented Sep 2, 2017 •

edited

NicoPennec commented Sep 2, 2017 •

edited

Jussiadev commented Sep 2, 2017 •

edited

NicoPennec commented Sep 2, 2017 •

edited

NicoPennec commented Sep 2, 2017 •

edited